Merge branch 'meshtastic:master' into traceroute

src/components/CommandPalette.tsx

@@ -19,7 +19,7 @@ import {
   LayersIcon,
   LayoutIcon,
   LinkIcon,
-  LucideIcon,
+  type LucideIcon,
   MapIcon,
   MessageSquareIcon,
   MoonIcon,
@@ -350,7 +350,7 @@ export const CommandPalette = (): JSX.Element => {
 
     window.addEventListener("keydown", handleKeydown);
     return () => window.removeEventListener("keydown", handleKeydown);
-  }, []);
+  }, [setCommandPaletteOpen]);
 
   return (
     <CommandDialog

src/components/DeviceSelector.tsx

@@ -9,8 +9,8 @@ import {
   LanguagesIcon,
   MoonIcon,
   PlusIcon,
-  SunIcon,
   SearchIcon,
+  SunIcon,
 } from "lucide-react";
 
 export const DeviceSelector = (): JSX.Element => {

src/components/Dialog/DialogManager.tsx

@@ -1,9 +1,9 @@
+import { RemoveNodeDialog } from "@app/components/Dialog/RemoveNodeDialog.js";
 import { DeviceNameDialog } from "@components/Dialog/DeviceNameDialog.js";
 import { ImportDialog } from "@components/Dialog/ImportDialog.js";
 import { QRDialog } from "@components/Dialog/QRDialog.js";
 import { RebootDialog } from "@components/Dialog/RebootDialog.js";
 import { ShutdownDialog } from "@components/Dialog/ShutdownDialog.js";
-import { RemoveNodeDialog } from "@app/components/Dialog/RemoveNodeDialog.js"
 import { useDevice } from "@core/stores/deviceStore.js";
 
 export const DialogManager = (): JSX.Element => {

src/components/Dialog/QRDialog.tsx

@@ -9,10 +9,10 @@ import {
 } from "@components/UI/Dialog.js";
 import { Input } from "@components/UI/Input.js";
 import { Label } from "@components/UI/Label.js";
-import { Protobuf, Types } from "@meshtastic/js";
+import { Protobuf, type Types } from "@meshtastic/js";
 import { fromByteArray } from "base64-js";
 import { ClipboardIcon } from "lucide-react";
-import { useEffect, useState } from "react";
+import { useEffect, useMemo, useState } from "react";
 import { QRCode } from "react-qrcode-logo";
 
 export interface QRDialogProps {
@@ -32,7 +32,7 @@ export const QRDialog = ({
   const [qrCodeUrl, setQrCodeUrl] = useState<string>("");
   const [qrCodeAdd, setQrCodeAdd] = useState<boolean>();
 
-  const allChannels = Array.from(channels.values());
+  const allChannels = useMemo(() => Array.from(channels.values()), [channels]);
 
   useEffect(() => {
     const channelsToEncode = allChannels
@@ -50,8 +50,10 @@ export const QRDialog = ({
       .replace(/\+/g, "-")
       .replace(/\//g, "_");
 
-    setQrCodeUrl(`https://meshtastic.org/e/#${base64}${qrCodeAdd ? "?add=true" : ""}`);
-  }, [channels, selectedChannels, qrCodeAdd, loraConfig]);
+    setQrCodeUrl(
+      `https://meshtastic.org/e/#${base64}${qrCodeAdd ? "?add=true" : ""}`,
+    );
+  }, [allChannels, selectedChannels, qrCodeAdd, loraConfig]);
 
   return (
     <Dialog open={open} onOpenChange={onOpenChange}>
@@ -97,18 +99,26 @@ export const QRDialog = ({
           </div>
           <div className="flex justify-center">
             <button
-              type="button" 
-              className={ "border-black border-t border-l border-b rounded-l h-10 px-7 py-2 text-sm font-medium focus:outline-none focus:ring-2 focus:ring-offset-2 " + (qrCodeAdd ? "focus:ring-green-800 bg-green-800 text-white" : "focus:ring-slate-400 bg-slate-400 hover:bg-green-600") }
+              type="button"
+              className={`border-black border-t border-l border-b rounded-l h-10 px-7 py-2 text-sm font-medium focus:outline-none focus:ring-2 focus:ring-offset-2 ${
+                qrCodeAdd
+                  ? "focus:ring-green-800 bg-green-800 text-white"
+                  : "focus:ring-slate-400 bg-slate-400 hover:bg-green-600"
+              }`}
               onClick={() => setQrCodeAdd(true)}
-              >
-                Add Channels
+            >
+              Add Channels
             </button>
             <button
-              type="button" 
-              className={ "border-black border-t border-r border-b rounded-r h-10 px-4 py-2 text-sm font-medium focus:outline-none focus:ring-2 focus:ring-offset-2 " + (!qrCodeAdd ? "focus:ring-green-800 bg-green-800 text-white" : "focus:ring-slate-400 bg-slate-400 hover:bg-green-600") }
+              type="button"
+              className={`border-black border-t border-r border-b rounded-r h-10 px-4 py-2 text-sm font-medium focus:outline-none focus:ring-2 focus:ring-offset-2 ${
+                !qrCodeAdd
+                  ? "focus:ring-green-800 bg-green-800 text-white"
+                  : "focus:ring-slate-400 bg-slate-400 hover:bg-green-600"
+              }`}
               onClick={() => setQrCodeAdd(false)}
-              >
-                Replace Channels
+            >
+              Replace Channels
             </button>
           </div>
         </div>

src/components/Dialog/RebootDialog.tsx

@@ -37,7 +37,7 @@ export const RebootDialog = ({
           <Input
             type="number"
             value={time}
-            onChange={(e) => setTime(parseInt(e.target.value))}
+            onChange={(e) => setTime(Number.parseInt(e.target.value))}
             action={{
               icon: ClockIcon,
               onClick() {

src/components/Dialog/RemoveNodeDialog.tsx

@@ -44,7 +44,9 @@ export const RemoveNodeDialog = ({
           </form>
         </div>
         <DialogFooter>
-          <Button variant="destructive" onClick={() => onSubmit()}>Remove</Button>
+          <Button variant="destructive" onClick={() => onSubmit()}>
+            Remove
+          </Button>
         </DialogFooter>
       </DialogContent>
     </Dialog>

src/components/Dialog/ShutdownDialog.tsx

@@ -38,7 +38,7 @@ export const ShutdownDialog = ({
           <Input
             type="number"
             value={time}
-            onChange={(e) => setTime(parseInt(e.target.value))}
+            onChange={(e) => setTime(Number.parseInt(e.target.value))}
             suffix="Minutes"
           />
           <Button

src/components/Form/DynamicForm.tsx

@@ -1,17 +1,17 @@
 import {
   DynamicFormField,
-  FieldProps,
+  type FieldProps,
 } from "@components/Form/DynamicFormField.js";
 import { FieldWrapper } from "@components/Form/FormWrapper.js";
 import { Button } from "@components/UI/Button.js";
 import { H4 } from "@components/UI/Typography/H4.js";
 import { Subtle } from "@components/UI/Typography/Subtle.js";
 import {
-  Control,
-  DefaultValues,
-  FieldValues,
-  Path,
-  SubmitHandler,
+  type Control,
+  type DefaultValues,
+  type FieldValues,
+  type Path,
+  type SubmitHandler,
   useForm,
 } from "react-hook-form";
 
@@ -26,7 +26,7 @@ export interface BaseFormBuilderProps<T> {
   disabledBy?: DisabledBy<T>[];
   label: string;
   description?: string;
-  properties?: {};
+  properties?: Record<string, unknown>;
 }
 
 export interface GenericFormElementProps<T extends FieldValues, Y> {
@@ -94,9 +94,12 @@ export function DynamicForm<T extends FieldValues>({
           </div>
 
           {fieldGroup.fields.map((field) => (
-            <FieldWrapper label={field.label} description={field.description}>
+            <FieldWrapper
+              key={field.label}
+              label={field.label}
+              description={field.description}
+            >
               <DynamicFormField
-                key={field.label}
                 field={field}
                 control={control}
                 disabled={isDisabled(field.disabledBy)}

src/components/Form/DynamicFormField.tsx

@@ -1,6 +1,15 @@
-import { GenericInput, InputFieldProps } from "@components/Form/FormInput.js";
-import { SelectFieldProps, SelectInput } from "@components/Form/FormSelect.js";
-import { ToggleFieldProps, ToggleInput } from "@components/Form/FormToggle.js";
+import {
+  GenericInput,
+  type InputFieldProps,
+} from "@components/Form/FormInput.js";
+import {
+  type SelectFieldProps,
+  SelectInput,
+} from "@components/Form/FormSelect.js";
+import {
+  type ToggleFieldProps,
+  ToggleInput,
+} from "@components/Form/FormToggle.js";
 import type { Control, FieldValues } from "react-hook-form";
 
 export type FieldProps<T> =

src/components/Form/FormInput.tsx

@@ -4,7 +4,7 @@ import type {
 } from "@components/Form/DynamicForm.js";
 import { Input } from "@components/UI/Input.js";
 import type { LucideIcon } from "lucide-react";
-import { Controller, FieldValues } from "react-hook-form";
+import { Controller, type FieldValues } from "react-hook-form";
 
 export interface InputFieldProps<T> extends BaseFormBuilderProps<T> {
   type: "text" | "number" | "password";

src/components/Form/FormSelect.tsx

@@ -9,7 +9,7 @@ import {
   SelectTrigger,
   SelectValue,
 } from "@components/UI/Select.js";
-import { Controller, FieldValues } from "react-hook-form";
+import { Controller, type FieldValues } from "react-hook-form";
 
 export interface SelectFieldProps<T> extends BaseFormBuilderProps<T> {
   type: "select" | "multiSelect";
@@ -40,7 +40,7 @@ export function SelectInput<T extends FieldValues>({
           : [];
         return (
           <Select
-            onValueChange={(e) => onChange(parseInt(e))}
+            onValueChange={(e) => onChange(Number.parseInt(e))}
             disabled={disabled}
             value={value?.toString()}
             {...remainingProperties}

src/components/Form/FormToggle.tsx

@@ -3,8 +3,8 @@ import type {
   GenericFormElementProps,
 } from "@components/Form/DynamicForm.js";
 import { Switch } from "@components/UI/Switch.js";
-import { ChangeEvent } from "react";
-import { Controller, FieldValues } from "react-hook-form";
+import type { ChangeEvent } from "react";
+import { Controller, type FieldValues } from "react-hook-form";
 
 export interface ToggleFieldProps<T> extends BaseFormBuilderProps<T> {
   type: "toggle";

src/components/PageComponents/Channel.tsx

@@ -1,4 +1,4 @@
-import type{ ChannelValidation } from "@app/validation/channel.js";
+import type { ChannelValidation } from "@app/validation/channel.js";
 import { DynamicForm } from "@components/Form/DynamicForm.js";
 import { useToast } from "@core/hooks/useToast.js";
 import { useDevice } from "@core/stores/deviceStore.js";
@@ -20,8 +20,12 @@ export const Channel = ({ channel }: SettingsPanelProps): JSX.Element => {
         ...data.settings,
         psk: toByteArray(data.settings.psk ?? ""),
         moduleSettings: {
-          positionPrecision: data.settings.positionEnabled ? data.settings.preciseLocation ? 32 : data.settings.positionPrecision : 0,
-        }
+          positionPrecision: data.settings.positionEnabled
+            ? data.settings.preciseLocation
+              ? 32
+              : data.settings.positionPrecision
+            : 0,
+        },
       },
     });
     connection?.setChannel(channel).then(() => {
@@ -43,9 +47,16 @@ export const Channel = ({ channel }: SettingsPanelProps): JSX.Element => {
           settings: {
             ...channel?.settings,
             psk: fromByteArray(channel?.settings?.psk ?? new Uint8Array(0)),
-            positionEnabled: channel?.settings?.moduleSettings?.positionPrecision != undefined && channel?.settings?.moduleSettings?.positionPrecision > 0,
-            preciseLocation: channel?.settings?.moduleSettings?.positionPrecision == 32,
-            positionPrecision: channel?.settings?.moduleSettings?.positionPrecision == undefined ? 10 : channel?.settings?.moduleSettings?.positionPrecision
+            positionEnabled:
+              channel?.settings?.moduleSettings?.positionPrecision !==
+                undefined &&
+              channel?.settings?.moduleSettings?.positionPrecision > 0,
+            preciseLocation:
+              channel?.settings?.moduleSettings?.positionPrecision === 32,
+            positionPrecision:
+              channel?.settings?.moduleSettings?.positionPrecision === undefined
+                ? 10
+                : channel?.settings?.moduleSettings?.positionPrecision,
           },
         },
       }}
@@ -111,9 +122,32 @@ export const Channel = ({ channel }: SettingsPanelProps): JSX.Element => {
               description:
                 "If not sharing precise location, position shared on channel will be accurate within this distance",
               properties: {
-                enumValue: config.display?.units == 0 ?
-                { "Within 23 km":10, "Within 12 km":11, "Within 5.8 km":12, "Within 2.9 km":13, "Within 1.5 km":14, "Within 700 m":15, "Within 350 m":16, "Within 200 m":17, "Within 90 m":18, "Within 50 m":19 } :
-                { "Within 15 miles":10, "Within 7.3 miles":11, "Within 3.6 miles":12, "Within 1.8 miles":13, "Within 0.9 miles":14, "Within 0.5 miles":15, "Within 0.2 miles":16, "Within 600 feet":17, "Within 300 feet":18, "Within 150 feet":19 }
+                enumValue:
+                  config.display?.units === 0
+                    ? {
+                        "Within 23 km": 10,
+                        "Within 12 km": 11,
+                        "Within 5.8 km": 12,
+                        "Within 2.9 km": 13,
+                        "Within 1.5 km": 14,
+                        "Within 700 m": 15,
+                        "Within 350 m": 16,
+                        "Within 200 m": 17,
+                        "Within 90 m": 18,
+                        "Within 50 m": 19,
+                      }
+                    : {
+                        "Within 15 miles": 10,
+                        "Within 7.3 miles": 11,
+                        "Within 3.6 miles": 12,
+                        "Within 1.8 miles": 13,
+                        "Within 0.9 miles": 14,
+                        "Within 0.5 miles": 15,
+                        "Within 0.2 miles": 16,
+                        "Within 600 feet": 17,
+                        "Within 300 feet": 18,
+                        "Within 150 feet": 19,
+                      },
               },
             },
           ],

src/components/PageComponents/Config/LoRa.tsx

@@ -41,7 +41,7 @@ export const LoRa = (): JSX.Element => {
               label: "Hop Limit",
               description: "Maximum number of hops",
               properties: {
-                enumValue: {1:1, 2:2, 3:3, 4:4, 5:5, 6:6, 7:7}
+                enumValue: { 1: 1, 2: 2, 3: 3, 4: 4, 5: 5, 6: 6, 7: 7 },
               },
             },
             {

src/components/PageComponents/Connect/BLE.tsx

@@ -1,4 +1,4 @@
-import { TabElementProps } from "@app/components/Dialog/NewDeviceDialog";
+import type { TabElementProps } from "@app/components/Dialog/NewDeviceDialog";
 import { Button } from "@components/UI/Button.js";
 import { Mono } from "@components/generic/Mono.js";
 import { useAppStore } from "@core/stores/appStore.js";

src/components/PageComponents/Connect/HTTP.tsx

@@ -1,4 +1,4 @@
-import { TabElementProps } from "@app/components/Dialog/NewDeviceDialog";
+import type { TabElementProps } from "@app/components/Dialog/NewDeviceDialog";
 import { Button } from "@components/UI/Button.js";
 import { Input } from "@components/UI/Input.js";
 import { Label } from "@components/UI/Label.js";
@@ -8,6 +8,7 @@ import { useDeviceStore } from "@core/stores/deviceStore.js";
 import { subscribeAll } from "@core/subscriptions.js";
 import { randId } from "@core/utils/randId.js";
 import { HttpConnection } from "@meshtastic/js";
+import { useState } from "react";
 import { Controller, useForm, useWatch } from "react-hook-form";
 
 export const HTTP = ({ closeDialog }: TabElementProps): JSX.Element => {
@@ -19,7 +20,7 @@ export const HTTP = ({ closeDialog }: TabElementProps): JSX.Element => {
   }>({
     defaultValues: {
       ip: ["client.meshtastic.org", "localhost"].includes(
-        window.location.hostname
+        window.location.hostname,
       )
         ? "meshtastic.local"
         : window.location.hostname,
@@ -33,10 +34,13 @@ export const HTTP = ({ closeDialog }: TabElementProps): JSX.Element => {
     defaultValue: location.protocol === "https:",
   });
 
+  const [connectionInProgress, setConnectionInProgress] = useState(false);
+
   const onSubmit = handleSubmit(async (data) => {
+    setConnectionInProgress(true);
+
     const id = randId();
     const device = addDevice(id);
-    setSelectedDevice(id);
     const connection = new HttpConnection(id);
     // TODO: Promise never resolves
     await connection.connect({
@@ -44,9 +48,10 @@ export const HTTP = ({ closeDialog }: TabElementProps): JSX.Element => {
       fetchInterval: 2000,
       tls: data.tls,
     });
+
+    setSelectedDevice(id);
     device.addConnection(connection);
     subscribeAll(device, connection);
-
     closeDialog();
   });
 
@@ -58,6 +63,7 @@ export const HTTP = ({ closeDialog }: TabElementProps): JSX.Element => {
           // label="IP Address/Hostname"
           prefix={tlsEnabled ? "https://" : "http://"}
           placeholder="000.000.000.000 / meshtastic.local"
+          disabled={connectionInProgress}
           {...register("ip")}
         />
         <Controller
@@ -69,7 +75,9 @@ export const HTTP = ({ closeDialog }: TabElementProps): JSX.Element => {
               <Switch
                 // label="Use TLS"
                 // description="Description"
-                disabled={location.protocol === "https:"}
+                disabled={
+                  location.protocol === "https:" || connectionInProgress
+                }
                 checked={value}
                 {...rest}
               />
@@ -77,8 +85,8 @@ export const HTTP = ({ closeDialog }: TabElementProps): JSX.Element => {
           )}
         />
       </div>
-      <Button type="submit">
-        <span>Connect</span>
+      <Button type="submit" disabled={connectionInProgress}>
+        <span>{connectionInProgress ? "Connecting..." : "Connect"}</span>
       </Button>
     </form>
   );

src/components/PageComponents/Connect/Serial.tsx

@@ -1,4 +1,4 @@
-import { TabElementProps } from "@app/components/Dialog/NewDeviceDialog";
+import type { TabElementProps } from "@app/components/Dialog/NewDeviceDialog";
 import { Button } from "@components/UI/Button.js";
 import { Mono } from "@components/generic/Mono.js";
 import { useAppStore } from "@core/stores/appStore.js";
@@ -48,19 +48,22 @@ export const Serial = ({ closeDialog }: TabElementProps): JSX.Element => {
   return (
     <div className="flex w-full flex-col gap-2 p-4">
       <div className="flex h-48 flex-col gap-2 overflow-y-auto">
-        {serialPorts.map((port, index) => (
-          <Button
-            key={index}
-            disabled={port.readable !== null}
-            onClick={async () => {
-              await onConnect(port);
-            }}
-          >
-            {`# ${index} - ${port.getInfo().usbVendorId ?? "UNK"} - ${
-              port.getInfo().usbProductId ?? "UNK"
-            }`}
-          </Button>
-        ))}
+        {serialPorts.map((port, index) => {
+          const { usbProductId, usbVendorId } = port.getInfo();
+          return (
+            <Button
+              key={`${usbVendorId ?? "UNK"}-${usbProductId ?? "UNK"}-${index}`}
+              disabled={port.readable !== null}
+              onClick={async () => {
+                await onConnect(port);
+              }}
+            >
+              {`# ${index} - ${usbVendorId ?? "UNK"} - ${
+                usbProductId ?? "UNK"
+              }`}
+            </Button>
+          );
+        })}
         {serialPorts.length === 0 && (
           <Mono className="m-auto select-none">No devices paired yet.</Mono>
         )}

src/components/PageComponents/Messages/ChannelChat.tsx

@@ -1,5 +1,8 @@
 import { Subtle } from "@app/components/UI/Typography/Subtle.js";
-import { MessageWithState, useDevice } from "@app/core/stores/deviceStore.js";
+import {
+  type MessageWithState,
+  useDevice,
+} from "@app/core/stores/deviceStore.js";
 import { Message } from "@components/PageComponents/Messages/Message.js";
 import { TraceRoute } from "@components/PageComponents/Messages/TraceRoute.js";
 import { MessageInput } from "@components/PageComponents/Messages/MessageInput.js";

src/components/PageComponents/ModuleConfig/DetectionSensor.tsx

@@ -38,9 +38,9 @@ export const DetectionSensor = (): JSX.Element => {
               label: "Minimum Broadcast Seconds",
               description:
                 "The interval in seconds of how often we can send a message to the mesh when a state change is detected",
-                properties: {
-                  suffix: "Seconds",
-                },  
+              properties: {
+                suffix: "Seconds",
+              },
               disabledBy: [
                 {
                   fieldName: "enabled",

src/components/PageComponents/ModuleConfig/MQTT.tsx

@@ -4,14 +4,20 @@ import { DynamicForm } from "@components/Form/DynamicForm.js";
 import { Protobuf } from "@meshtastic/js";
 
 export const MQTT = (): JSX.Element => {
-  const { moduleConfig, setWorkingModuleConfig } = useDevice();
+  const { config, moduleConfig, setWorkingModuleConfig } = useDevice();
 
   const onSubmit = (data: MqttValidation) => {
     setWorkingModuleConfig(
       new Protobuf.ModuleConfig.ModuleConfig({
         payloadVariant: {
           case: "mqtt",
-          value: data,
+          value: {
+            ...data,
+            mapReportSettings:
+              new Protobuf.ModuleConfig.ModuleConfig_MapReportSettings(
+                data.mapReportSettings,
+              ),
+          },
         },
       }),
     );
@@ -70,7 +76,8 @@ export const MQTT = (): JSX.Element => {
               type: "toggle",
               name: "encryptionEnabled",
               label: "Encryption Enabled",
-              description: "Enable or disable MQTT encryption",
+              description:
+                "Enable or disable MQTT encryption. Note: All messages are sent to the MQTT broker unencrypted if this option is not enabled, even when your uplink channels have encryption keys set. This includes position data.",
               disabledBy: [
                 {
                   fieldName: "enabled",
@@ -151,10 +158,39 @@ export const MQTT = (): JSX.Element => {
               ],
             },
             {
-              type: "number",
+              type: "select",
               name: "mapReportSettings.positionPrecision",
-              label: "Position Precision",
-              description: "Precision of the position",
+              label: "Approximate Location",
+              description:
+                "Position shared will be accurate within this distance",
+              properties: {
+                enumValue:
+                  config.display?.units === 0
+                    ? {
+                        "Within 23 km": 10,
+                        "Within 12 km": 11,
+                        "Within 5.8 km": 12,
+                        "Within 2.9 km": 13,
+                        "Within 1.5 km": 14,
+                        "Within 700 m": 15,
+                        "Within 350 m": 16,
+                        "Within 200 m": 17,
+                        "Within 90 m": 18,
+                        "Within 50 m": 19,
+                      }
+                    : {
+                        "Within 15 miles": 10,
+                        "Within 7.3 miles": 11,
+                        "Within 3.6 miles": 12,
+                        "Within 1.8 miles": 13,
+                        "Within 0.9 miles": 14,
+                        "Within 0.5 miles": 15,
+                        "Within 0.2 miles": 16,
+                        "Within 600 feet": 17,
+                        "Within 300 feet": 18,
+                        "Within 150 feet": 19,
+                      },
+              },
               disabledBy: [
                 {
                   fieldName: "enabled",

src/components/PageComponents/ModuleConfig/NeighborInfo.tsx

@@ -36,7 +36,7 @@ export const NeighborInfo = (): JSX.Element => {
               type: "number",
               name: "updateInterval",
               label: "Update Interval",
-              description: 
+              description:
                 "Interval in seconds of how often we should try to send our Neighbor Info to the mesh",
               properties: {
                 suffix: "Seconds",

src/components/PageComponents/ModuleConfig/Paxcounter.tsx

@@ -36,7 +36,8 @@ export const Paxcounter = (): JSX.Element => {
               type: "number",
               name: "paxcounterUpdateInterval",
               label: "Update Interval (seconds)",
-              description: "How long to wait between sending paxcounter packets",
+              description:
+                "How long to wait between sending paxcounter packets",
               properties: {
                 suffix: "Seconds",
               },

src/components/PageLayout.tsx

@@ -1,5 +1,5 @@
 import { cn } from "@app/core/utils/cn.js";
-import { AlignLeftIcon, LucideIcon } from "lucide-react";
+import { AlignLeftIcon, type LucideIcon } from "lucide-react";
 
 export interface PageLayoutProps {
   label: string;

src/components/Sidebar.tsx

@@ -4,15 +4,16 @@ import { Subtle } from "@components/UI/Typography/Subtle.js";
 import { useDevice } from "@core/stores/deviceStore.js";
 import type { Page } from "@core/stores/deviceStore.js";
 import {
+  BatteryMediumIcon,
+  CpuIcon,
   EditIcon,
   LayersIcon,
-  LucideIcon,
+  type LucideIcon,
   MapIcon,
   MessageSquareIcon,
   SettingsIcon,
   UsersIcon,
   ZapIcon,
-  BatteryMediumIcon
 } from "lucide-react";
 
 export interface SidebarProps {
@@ -20,8 +21,9 @@ export interface SidebarProps {
 }
 
 export const Sidebar = ({ children }: SidebarProps): JSX.Element => {
-  const { hardware, nodes } = useDevice();
+  const { hardware, nodes, metadata } = useDevice();
   const myNode = nodes.get(hardware.myNodeNum);
+  const myMetadata = metadata.get(0);
   const { activePage, setActivePage, setDialogOpen } = useDevice();
 
   interface NavLink {
@@ -77,12 +79,18 @@ export const Sidebar = ({ children }: SidebarProps): JSX.Element => {
       </div>
       <div className="px-8 pb-6">
         <div className="flex items-center">
-            <BatteryMediumIcon size={24} viewBox={'0 0 28 24'}/>
-            <Subtle>{myNode?.deviceMetrics?.batteryLevel ?? "UNK"}%</Subtle>
+          <BatteryMediumIcon size={24} viewBox={"0 0 28 24"} />
+          <Subtle>{myNode?.deviceMetrics?.batteryLevel ?? "UNK"}%</Subtle>
         </div>
         <div className="flex items-center">
-            <ZapIcon size={24} viewBox={'0 0 36 24'}/>
-            <Subtle>{myNode?.deviceMetrics?.voltage.toPrecision(3) ?? "UNK"} volts</Subtle>
+          <ZapIcon size={24} viewBox={"0 0 36 24"} />
+          <Subtle>
+            {myNode?.deviceMetrics?.voltage.toPrecision(3) ?? "UNK"} volts
+          </Subtle>
+        </div>
+        <div className="flex items-center">
+          <CpuIcon size={24} viewBox={"0 0 36 24"} />
+          <Subtle>v{myMetadata?.firmwareVersion ?? "UNK"}</Subtle>
         </div>
       </div>
 

src/components/Toaster.tsx

@@ -17,8 +17,14 @@ export function Toaster() {
       {toasts.map(({ id, title, description, action, ...props }) => (
         <Toast key={id} {...props}>
           <div className="grid gap-1">
-            {title && <ToastTitle className="dark:text-white">{title}</ToastTitle>}
-            {description && <ToastDescription className="dark:text-white-400">{description}</ToastDescription>}
+            {title && (
+              <ToastTitle className="dark:text-white">{title}</ToastTitle>
+            )}
+            {description && (
+              <ToastDescription className="dark:text-white-400">
+                {description}
+              </ToastDescription>
+            )}
           </div>
           {action}
           <ToastClose />

src/components/UI/Button.tsx

@@ -1,4 +1,4 @@
-import { VariantProps, cva } from "class-variance-authority";
+import { type VariantProps, cva } from "class-variance-authority";
 import * as React from "react";
 
 import { cn } from "@core/utils/cn.js";

src/components/UI/Toast.tsx

@@ -1,5 +1,5 @@
 import * as ToastPrimitives from "@radix-ui/react-toast";
-import { VariantProps, cva } from "class-variance-authority";
+import { type VariantProps, cva } from "class-variance-authority";
 import { X } from "lucide-react";
 import * as React from "react";
 

src/components/generic/Table/index.tsx

@@ -1,4 +1,5 @@
-import { ChevronUpIcon } from "lucide-react";
+import { ChevronDownIcon, ChevronUpIcon } from "lucide-react";
+import React, { useState } from "react";
 
 export interface TableProps {
   headings: Heading[];
@@ -12,6 +13,49 @@ export interface Heading {
 }
 
 export const Table = ({ headings, rows }: TableProps): JSX.Element => {
+  const [sortColumn, setSortColumn] = useState<string | null>("Last Heard");
+  const [sortOrder, setSortOrder] = useState<"asc" | "desc">("desc");
+
+  const headingSort = (title: string) => {
+    if (sortColumn === title) {
+      setSortOrder(sortOrder === "asc" ? "desc" : "asc");
+    } else {
+      setSortColumn(title);
+      setSortOrder("asc");
+    }
+  };
+
+  const sortedRows = rows.slice().sort((a, b) => {
+    if (!sortColumn) return 0;
+
+    const columnIndex = headings.findIndex((h) => h.title === sortColumn);
+    const aValue = a[columnIndex].props.children;
+    const bValue = b[columnIndex].props.children;
+
+    // Custom comparison for 'Last Heard' column
+    if (sortColumn === "Last Heard") {
+      const aTimestamp = aValue.props.timestamp ?? 0;
+      const bTimestamp = bValue.props.timestamp ?? 0;
+
+      if (aTimestamp < bTimestamp) {
+        return sortOrder === "asc" ? -1 : 1;
+      }
+      if (aTimestamp > bTimestamp) {
+        return sortOrder === "asc" ? 1 : -1;
+      }
+      return 0;
+    }
+
+    // Default comparison for other columns
+    if (aValue < bValue) {
+      return sortOrder === "asc" ? -1 : 1;
+    }
+    if (aValue > bValue) {
+      return sortOrder === "asc" ? 1 : -1;
+    }
+    return 0;
+  });
+
   return (
     <table className="min-w-full">
       <thead className="bg-backgroundPrimary text-sm font-semibold text-textPrimary">
@@ -25,11 +69,19 @@ export const Table = ({ headings, rows }: TableProps): JSX.Element => {
                   ? "cursor-pointer hover:brightness-hover active:brightness-press"
                   : ""
               }`}
+              onClick={() => heading.sortable && headingSort(heading.title)}
+              onKeyUp={() => heading.sortable && headingSort(heading.title)}
             >
               <div className="flex gap-2">
                 {heading.title}
-                {heading.sortable && (
-                  <ChevronUpIcon size={16} className="my-auto" />
+                {sortColumn === heading.title && (
+                  <>
+                    {sortOrder === "asc" ? (
+                      <ChevronUpIcon size={16} />
+                    ) : (
+                      <ChevronDownIcon size={16} />
+                    )}
+                  </>
                 )}
               </div>
             </th>
@@ -37,10 +89,12 @@ export const Table = ({ headings, rows }: TableProps): JSX.Element => {
         </tr>
       </thead>
       <tbody>
-        {rows.map((row, index) => (
+        {sortedRows.map((row, index) => (
+          // biome-ignore lint/suspicious/noArrayIndexKey: TODO: Once this table is sortable, this should get fixed.
           <tr key={index}>
             {row.map((item, index) => (
               <td
+                // biome-ignore lint/suspicious/noArrayIndexKey: OK because column order never changes.
                 key={index}
                 className="whitespace-nowrap py-2 text-sm text-textSecondary first:pl-2"
               >