Update widgets

src/components/Card.tsx

@@ -0,0 +1,18 @@
+import type React from "react";
+
+export const Card = ({
+  children,
+  className,
+  ...rest
+}: JSX.IntrinsicElements["div"]): JSX.Element => {
+  return (
+    <div
+      className={`flex overflow-hidden rounded-2xl bg-white text-sm text-black shadow-md ${
+        className ?? ""
+      }`}
+      {...rest}
+    >
+      {children}
+    </div>
+  );
+};

src/components/DeviceSelector.tsx

@@ -5,13 +5,15 @@ import { useDeviceStore } from "@app/core/stores/deviceStore.js";
 import { Hashicon } from "@emeraldpay/hashicon-react";
 import { PlusIcon } from "@heroicons/react/24/outline";
 
+import { Mono } from "./Mono.js";
+
 export const DeviceSelector = (): JSX.Element => {
   const { getDevices } = useDeviceStore();
   const { selectedDevice, setSelectedDevice } = useAppStore();
 
   return (
-    <div className="flex h-full w-16 items-center whitespace-nowrap bg-slate-50 py-12 text-sm [writing-mode:vertical-rl]">
-      <span className="font-mono text-slate-500">Connected Devices</span>
+    <div className="flex h-full w-16 items-center whitespace-nowrap bg-slate-50 py-12 [writing-mode:vertical-rl]">
+      <Mono>Connected Devices</Mono>
       <span className="mt-6 flex gap-4 font-bold text-slate-900">
         {getDevices().map((device) => (
           <div

src/components/IconButton.tsx

@@ -13,6 +13,7 @@ export const IconButton = ({
   variant = "primary",
   icon,
   disabled,
+  className,
   ...rest
 }: IconButtonProps): JSX.Element => {
   return (
@@ -23,7 +24,9 @@ export const IconButton = ({
           : "bg-orange-100 text-orange-700 hover:bg-orange-200"
       } ${
         size === "sm" ? "h-8 w-8" : size === "md" ? "h-10 w-10" : "h-12 w-12"
-      } ${disabled ? "cursor-not-allowed bg-red-400 focus:ring-red-500" : ""}`}
+      } ${disabled ? "cursor-not-allowed bg-red-400 focus:ring-red-500" : ""} ${
+        className ?? ""
+      }`}
       disabled={disabled}
       {...rest}
     >

src/components/Mono.tsx

@@ -0,0 +1,16 @@
+import type React from "react";
+
+export const Mono = ({
+  children,
+  className,
+  ...rest
+}: JSX.IntrinsicElements["span"]): JSX.Element => {
+  return (
+    <span
+      className={`font-mono text-sm text-slate-500 ${className ?? ""}`}
+      {...rest}
+    >
+      {children}
+    </span>
+  );
+};

src/components/Sidebar.tsx

@@ -1,10 +1,13 @@
 import type React from "react";
+import { useEffect, useState } from "react";
 
 import { useDevice } from "@app/core/providers/useDevice.js";
+import { toMGRS } from "@app/core/utils/toMGRS.js";
 import { useAppStore } from "@core/stores/appStore.js";
 import { useDeviceStore } from "@core/stores/deviceStore.js";
-import { Types } from "@meshtastic/meshtasticjs";
+import { Protobuf, Types } from "@meshtastic/meshtasticjs";
 
+import { BatteryWidget } from "./Widgets/BatteryWidget.js";
 import { ConfiguringWidget } from "./Widgets/ConfiguringWidget.js";
 import { DeviceWidget } from "./Widgets/DeviceWidget.js";
 import { NodeInfoWidget } from "./Widgets/NodeInfoWidget.js";
@@ -15,6 +18,21 @@ export const Sidebar = (): JSX.Element => {
   const { removeDevice } = useDeviceStore();
   const { connection, hardware, nodes, status } = useDevice();
   const { selectedDevice, setSelectedDevice } = useAppStore();
+  const [telemtery, setTelemetry] = useState<Protobuf.DeviceMetrics>();
+  const [grid, setGrid] = useState<string>("");
+  const [batteryHistory, setBatteryHistory] = useState<number[]>([]);
+
+  useEffect(() => {
+    const device = nodes.find((n) => n.data.num === hardware.myNodeNum);
+    if (device?.deviceMetrics?.length) {
+      setTelemetry(device.deviceMetrics[device.deviceMetrics?.length]);
+    }
+    if (device?.data.position) {
+      setGrid(
+        toMGRS(device.data.position.latitudeI, device.data.position.longitudeI)
+      );
+    }
+  }, [nodes, hardware.myNodeNum]);
 
   return (
     <div className="relative flex w-80 flex-shrink-0 flex-col gap-2 border-x border-slate-200 bg-slate-50 p-2">
@@ -49,29 +67,14 @@ export const Sidebar = (): JSX.Element => {
       {/*  */}
       {/*  */}
       {/*  */}
-      <div className="space-y-6">
-        <div>
-          <h3 className="font-medium text-gray-900">Information</h3>
-          <dl className="mt-2 divide-y divide-gray-200 border-t border-b border-gray-200">
-            <div className="flex justify-between py-3 text-sm font-medium">
-              <dt className="text-gray-500">Firmware version</dt>
-              <dd className="cursor-pointer whitespace-nowrap text-gray-900 hover:text-orange-400 hover:underline">
-                {hardware.firmwareVersion}
-              </dd>
-            </div>
-          </dl>
-          <div className="flex justify-between py-3 text-sm font-medium">
-            <dt className="text-gray-500">Bitrate</dt>
-            <dd className="whitespace-nowrap text-gray-900">
-              {hardware.bitrate.toFixed(2)}
-              <span className="font-mono text-sm text-slate-500 ">bps</span>
-            </dd>
-          </div>
-        </div>
-        <NodeInfoWidget />
-        {/* <BatteryWidget /> */}
-        <PeersWidget />
-        <PositionWidget />
+      <div className="flex flex-col gap-3">
+        <NodeInfoWidget hardware={hardware} />
+        <BatteryWidget
+          batteryLevel={telemtery?.batteryLevel ?? 0}
+          voltage={telemtery?.voltage ?? 0}
+        />
+        <PeersWidget peers={nodes.map((n) => n.data)} />
+        <PositionWidget grid={grid} />
 
         <ConfiguringWidget />
       </div>

src/components/Widgets/BatteryWidget.tsx

@@ -0,0 +1,30 @@
+import type React from "react";
+
+import { BoltIcon } from "@heroicons/react/24/outline";
+
+import { Card } from "../Card.js";
+
+export interface BatteryWidgetProps {
+  batteryLevel: number;
+  voltage: number;
+}
+
+export const BatteryWidget = ({
+  batteryLevel,
+  voltage,
+}: BatteryWidgetProps): JSX.Element => {
+  return (
+    <Card>
+      <div className="flex w-20 bg-slate-700 p-3">
+        <BoltIcon className="m-auto h-12 text-white" />
+      </div>
+      <div className="w-full">
+        <div className="flex h-8 bg-slate-100">
+          <span className="m-auto text-lg font-medium">Power</span>
+        </div>
+        <span>{batteryLevel}</span>
+        <span>{voltage}</span>
+      </div>
+    </Card>
+  );
+};

src/components/Widgets/ConfiguringWidget.tsx

@@ -2,6 +2,9 @@ import React, { useEffect } from "react";
 
 import { useDevice } from "@core/providers/useDevice.js";
 
+import { Button } from "../Button.js";
+import { Card } from "../Card.js";
+
 export const ConfiguringWidget = (): JSX.Element => {
   const {
     hardware,
@@ -32,40 +35,45 @@ export const ConfiguringWidget = (): JSX.Element => {
   ]);
 
   return (
-    <div className="mb-4 flex flex-col space-y-3 rounded-2xl bg-[#f9e3aa] p-6 text-sm text-black">
-      <p className="text-xl font-bold">Connecting to device</p>
-      <ol className="flex flex-col gap-3 overflow-hidden">
-        <StatusIndicator
-          title="Device Info"
-          current={hardware.myNodeNum ? 1 : 0}
-          total={0}
-        />
-        <StatusIndicator title="Peers" current={nodes.length} total={0} />
-        <StatusIndicator
-          title="Device Config"
-          current={Object.keys(config).length - 1}
-          total={6}
-        />
-        <StatusIndicator
-          title="Module Config"
-          current={Object.keys(moduleConfig).length - 1}
-          total={6}
-        />
-        <StatusIndicator
-          title="Channels"
-          current={channels.length}
-          total={hardware.maxChannels ?? 0}
-        />
-      </ol>
-      <div
-        className="mt-2 cursor-pointer rounded-md bg-[#dabb6b] p-1  text-center ring-[#f9e3aa]"
-        onClick={() => {
-          void connection?.configure();
-        }}
-      >
-        Retry
+    <Card className="flex-col">
+      <div className="flex h-8 bg-slate-100">
+        <span className="m-auto text-lg font-medium">Power</span>
+      </div>
+      <div className="flex flex-col gap-2 p-3">
+        <ol className="flex flex-col gap-3 overflow-hidden">
+          <StatusIndicator
+            title="Device Info"
+            current={hardware.myNodeNum ? 1 : 0}
+            total={0}
+          />
+          <StatusIndicator title="Peers" current={nodes.length} total={0} />
+          <StatusIndicator
+            title="Device Config"
+            current={Object.keys(config).length - 1}
+            total={6}
+          />
+          <StatusIndicator
+            title="Module Config"
+            current={Object.keys(moduleConfig).length - 1}
+            total={6}
+          />
+          <StatusIndicator
+            title="Channels"
+            current={channels.length}
+            total={hardware.maxChannels ?? 0}
+          />
+        </ol>
+        <Button
+          variant="secondary"
+          size="sm"
+          onClick={() => {
+            void connection?.configure();
+          }}
+        >
+          Retry
+        </Button>
       </div>
-    </div>
+    </Card>
   );
 };
 

src/components/Widgets/DeviceWidget.tsx

@@ -4,6 +4,7 @@ import { Hashicon } from "@emeraldpay/hashicon-react";
 import { XCircleIcon } from "@heroicons/react/24/outline";
 
 import { Button } from "../Button.js";
+import { Card } from "../Card.js";
 
 export interface DeviceWidgetProps {
   name: string;
@@ -21,7 +22,7 @@ export const DeviceWidget = ({
   reconnect,
 }: DeviceWidgetProps): JSX.Element => {
   return (
-    <div className="relative overflow-hidden rounded-xl bg-emerald-400">
+    <Card className="relative flex-col">
       <div className="absolute bottom-20 h-full w-full">
         <Hashicon size={350} value={nodeNum} />
       </div>
@@ -45,6 +46,6 @@ export const DeviceWidget = ({
           </div>
         </div>
       </div>
-    </div>
+    </Card>
   );
 };

src/components/Widgets/NodeInfoWidget.tsx

@@ -1,11 +1,38 @@
 import type React from "react";
 
-export interface NodeInfoWidgetProps {}
+import type { Protobuf } from "@meshtastic/meshtasticjs";
 
-export const NodeInfoWidget = ({}: NodeInfoWidgetProps): JSX.Element => {
+import { Card } from "../Card.js";
+
+export interface NodeInfoWidgetProps {
+  hardware: Protobuf.MyNodeInfo;
+}
+
+export const NodeInfoWidget = ({
+  hardware,
+}: NodeInfoWidgetProps): JSX.Element => {
   return (
-    <div className="mb-4 flex flex-col space-y-3 rounded-2xl bg-[#f9e3aa] p-6 text-sm text-black">
-      node info
-    </div>
+    <Card className="flex-col">
+      <div className="flex h-8 bg-slate-100">
+        <span className="m-auto text-lg font-medium">Information</span>
+      </div>
+      <div className="flex flex-col gap-2 p-3">
+        <dl className="mt-2 border-b border-gray-200">
+          <div className="flex justify-between py-1 text-sm font-medium">
+            <dt className="text-gray-500">Firmware version</dt>
+            <dd className="cursor-pointer whitespace-nowrap text-gray-900 hover:text-orange-400 hover:underline">
+              {hardware.firmwareVersion}
+            </dd>
+          </div>
+        </dl>
+        <div className="flex justify-between py-1 text-sm font-medium">
+          <dt className="text-gray-500">Bitrate</dt>
+          <dd className="whitespace-nowrap text-gray-900">
+            {hardware.bitrate.toFixed(2)}
+            <span className="font-mono text-sm text-slate-500 ">bps</span>
+          </dd>
+        </div>
+      </div>
+    </Card>
   );
 };

src/components/Widgets/PeersWidget.tsx

@@ -1,11 +1,55 @@
 import type React from "react";
 
-export interface PeersWidgetProps {}
+import { base16 } from "rfc4648";
 
-export const PeersWidget = ({}: PeersWidgetProps): JSX.Element => {
+import { Hashicon } from "@emeraldpay/hashicon-react";
+import { EllipsisHorizontalCircleIcon } from "@heroicons/react/24/outline";
+import type { Protobuf } from "@meshtastic/meshtasticjs";
+
+import { Card } from "../Card.js";
+import { IconButton } from "../IconButton.js";
+import { Mono } from "../Mono.js";
+
+export interface PeersWidgetProps {
+  peers: Protobuf.NodeInfo[];
+}
+
+export const PeersWidget = ({ peers }: PeersWidgetProps): JSX.Element => {
   return (
-    <div className="mb-4 flex flex-col space-y-3 rounded-2xl bg-[#f9e3aa] p-6 text-sm text-black">
-      Peers
-    </div>
+    <Card>
+      <div className="flex w-full flex-col gap-1">
+        <div className="flex h-8 bg-slate-100">
+          <span className="m-auto text-lg font-medium">Peers</span>
+        </div>
+        <div className="p-4">
+          {peers.map((peer) => (
+            <div
+              className="flex gap-2 rounded-md p-2 hover:bg-slate-100"
+              key={peer.num}
+            >
+              <span className="my-auto shrink-0">
+                <Hashicon value={peer.num.toString()} size={28} />
+              </span>
+              <div className="flex flex-col">
+                <span className="font-medium">{peer.user?.longName}</span>
+                <Mono>
+                  {base16
+                    .stringify(peer.user?.macaddr ?? [])
+                    .match(/.{1,2}/g)
+                    ?.join(":") ?? ""}
+                </Mono>
+              </div>
+              <div className="my-auto ml-auto">
+                <IconButton
+                  variant="secondary"
+                  size="sm"
+                  icon={<EllipsisHorizontalCircleIcon className="h-4" />}
+                />
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+    </Card>
   );
 };

src/components/Widgets/PositionWidget.tsx

@@ -1,11 +1,25 @@
 import type React from "react";
 
-export interface PositionWidgetProps {}
+import { MapPinIcon } from "@heroicons/react/24/outline";
 
-export const PositionWidget = ({}: PositionWidgetProps): JSX.Element => {
+import { Card } from "../Card.js";
+
+export interface PositionWidgetProps {
+  grid: string;
+}
+
+export const PositionWidget = ({ grid }: PositionWidgetProps): JSX.Element => {
   return (
-    <div className="mb-4 flex flex-col space-y-3 rounded-2xl bg-[#f9e3aa] p-6 text-sm text-black">
-      position
-    </div>
+    <Card>
+      <div className="flex w-20 bg-teal-600 p-3">
+        <MapPinIcon className="m-auto h-12 text-white" />
+      </div>
+      <div className="flex w-full flex-col">
+        <div className="flex h-8 bg-slate-100">
+          <span className="m-auto text-lg font-medium">Position</span>
+        </div>
+        <span className="m-auto text-lg">{grid}</span>
+      </div>
+    </Card>
   );
 };