Merge remote-tracking branch 'origin/master' into traceroute

src/components/DeviceSelector.tsx

@@ -10,7 +10,7 @@ import {
   MoonIcon,
   PlusIcon,
   SunIcon,
-  TerminalIcon,
+  SearchIcon,
 } from "lucide-react";
 
 export const DeviceSelector = (): JSX.Element => {
@@ -73,7 +73,7 @@ export const DeviceSelector = (): JSX.Element => {
           className="transition-all hover:text-accent"
           onClick={() => setCommandPaletteOpen(true)}
         >
-          <TerminalIcon />
+          <SearchIcon />
         </button>
         <button type="button" className="transition-all hover:text-accent">
           <LanguagesIcon />

src/components/Dialog/DialogManager.tsx

@@ -3,6 +3,7 @@ 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 => {
@@ -42,6 +43,12 @@ export const DialogManager = (): JSX.Element => {
           setDialogOpen("deviceName", open);
         }}
       />
+      <RemoveNodeDialog
+        open={dialog.nodeRemoval}
+        onOpenChange={(open) => {
+          setDialogOpen("nodeRemoval", open);
+        }}
+      />
     </>
   );
 };

src/components/Dialog/QRDialog.tsx

@@ -30,6 +30,7 @@ export const QRDialog = ({
 }: QRDialogProps): JSX.Element => {
   const [selectedChannels, setSelectedChannels] = useState<number[]>([0]);
   const [qrCodeUrl, setQrCodeUrl] = useState<string>("");
+  const [qrCodeAdd, setQrCodeAdd] = useState<boolean>();
 
   const allChannels = Array.from(channels.values());
 
@@ -49,8 +50,8 @@ export const QRDialog = ({
       .replace(/\+/g, "-")
       .replace(/\//g, "_");
 
-    setQrCodeUrl(`https://meshtastic.org/e/#${base64}`);
-  }, [channels, selectedChannels, loraConfig]);
+    setQrCodeUrl(`https://meshtastic.org/e/#${base64}${qrCodeAdd ? "?add=true" : ""}`);
+  }, [channels, selectedChannels, qrCodeAdd, loraConfig]);
 
   return (
     <Dialog open={open} onOpenChange={onOpenChange}>
@@ -94,6 +95,22 @@ export const QRDialog = ({
             </div>
             <QRCode value={qrCodeUrl} size={200} qrStyle="dots" />
           </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") }
+              onClick={() => setQrCodeAdd(true)}
+              >
+                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") }
+              onClick={() => setQrCodeAdd(false)}
+              >
+                Replace Channels
+            </button>
+          </div>
         </div>
         <DialogFooter>
           <Label>Sharable URL</Label>

src/components/Dialog/RemoveNodeDialog.tsx

@@ -0,0 +1,52 @@
+import { useAppStore } from "@app/core/stores/appStore";
+import { useDevice } from "@app/core/stores/deviceStore.js";
+import { Button } from "@components/UI/Button.js";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@components/UI/Dialog.js";
+import { Label } from "@components/UI/Label.js";
+
+export interface RemoveNodeDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+}
+
+export const RemoveNodeDialog = ({
+  open,
+  onOpenChange,
+}: RemoveNodeDialogProps): JSX.Element => {
+  const { connection, nodes, removeNode } = useDevice();
+  const { nodeNumToBeRemoved } = useAppStore();
+
+  const onSubmit = () => {
+    connection?.removeNodeByNum(nodeNumToBeRemoved);
+    removeNode(nodeNumToBeRemoved);
+    onOpenChange(false);
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>Remove Node?</DialogTitle>
+          <DialogDescription>
+            Are you sure you want to remove this Node?
+          </DialogDescription>
+        </DialogHeader>
+        <div className="gap-4">
+          <form onSubmit={onSubmit}>
+            <Label>{nodes.get(nodeNumToBeRemoved)?.user?.longName}</Label>
+          </form>
+        </div>
+        <DialogFooter>
+          <Button variant="destructive" onClick={() => onSubmit()}>Remove</Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+};

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";
@@ -10,7 +10,7 @@ export interface SettingsPanelProps {
 }
 
 export const Channel = ({ channel }: SettingsPanelProps): JSX.Element => {
-  const { connection, addChannel } = useDevice();
+  const { config, connection, addChannel } = useDevice();
   const { toast } = useToast();
 
   const onSubmit = (data: ChannelValidation) => {
@@ -19,6 +19,9 @@ export const Channel = ({ channel }: SettingsPanelProps): JSX.Element => {
       settings: {
         ...data.settings,
         psk: toByteArray(data.settings.psk ?? ""),
+        moduleSettings: {
+          positionPrecision: data.settings.positionEnabled ? data.settings.preciseLocation ? 32 : data.settings.positionPrecision : 0,
+        }
       },
     });
     connection?.setChannel(channel).then(() => {
@@ -40,6 +43,9 @@ 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
           },
         },
       }}
@@ -86,6 +92,30 @@ export const Channel = ({ channel }: SettingsPanelProps): JSX.Element => {
               label: "Downlink Enabled",
               description: "Send messages from MQTT to the local mesh",
             },
+            {
+              type: "toggle",
+              name: "settings.positionEnabled",
+              label: "Allow Position Requests",
+              description: "Send position to channel",
+            },
+            {
+              type: "toggle",
+              name: "settings.preciseLocation",
+              label: "Precise Location",
+              description: "Send precise location to channel",
+            },
+            {
+              type: "select",
+              name: "settings.positionPrecision",
+              label: "Approximate Location",
+              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 }
+              },
+            },
           ],
         },
       ]}

src/components/PageComponents/Config/Display.tsx

@@ -32,7 +32,7 @@ export const Display = (): JSX.Element => {
               label: "Screen Timeout",
               description: "Turn off the display after this long",
               properties: {
-                suffix: "seconds",
+                suffix: "Seconds",
               },
             },
             {
@@ -50,6 +50,9 @@ export const Display = (): JSX.Element => {
               name: "autoScreenCarouselSecs",
               label: "Carousel Delay",
               description: "How fast to cycle through windows",
+              properties: {
+                suffix: "Seconds",
+              },
             },
             {
               type: "toggle",

src/components/PageComponents/Config/LoRa.tsx

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

src/components/PageComponents/Config/Position.tsx

@@ -94,12 +94,18 @@ export const Position = (): JSX.Element => {
               name: "positionBroadcastSecs",
               label: "Broadcast Interval",
               description: "How often your position is sent out over the mesh",
+              properties: {
+                suffix: "Seconds",
+              },
             },
             {
               type: "number",
               name: "gpsUpdateInterval",
               label: "GPS Update Interval",
               description: "How often a GPS fix should be acquired",
+              properties: {
+                suffix: "Seconds",
+              },
             },
             {
               type: "number",

src/components/PageComponents/ModuleConfig/DetectionSensor.tsx

@@ -38,6 +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",
+                },  
               disabledBy: [
                 {
                   fieldName: "enabled",

src/components/PageComponents/ModuleConfig/MQTT.tsx

@@ -138,6 +138,9 @@ export const MQTT = (): JSX.Element => {
               name: "mapReportSettings.publishIntervalSecs",
               label: "Map Report Publish Interval (s)",
               description: "Interval in seconds to publish map reports",
+              properties: {
+                suffix: "Seconds",
+              },
               disabledBy: [
                 {
                   fieldName: "enabled",

src/components/PageComponents/ModuleConfig/NeighborInfo.tsx

@@ -36,8 +36,11 @@ 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",
+              },
               disabledBy: [
                 {
                   fieldName: "enabled",

src/components/PageComponents/ModuleConfig/Paxcounter.tsx

@@ -37,6 +37,9 @@ export const Paxcounter = (): JSX.Element => {
               name: "paxcounterUpdateInterval",
               label: "Update Interval (seconds)",
               description: "How long to wait between sending paxcounter packets",
+              properties: {
+                suffix: "Seconds",
+              },
               disabledBy: [
                 {
                   fieldName: "enabled",

src/components/PageComponents/ModuleConfig/RangeTest.tsx

@@ -37,6 +37,9 @@ export const RangeTest = (): JSX.Element => {
               name: "sender",
               label: "Message Interval",
               description: "How long to wait between sending test packets",
+              properties: {
+                suffix: "Seconds",
+              },
               disabledBy: [
                 {
                   fieldName: "enabled",

src/components/PageComponents/ModuleConfig/Telemetry.tsx

@@ -32,7 +32,7 @@ export const Telemetry = (): JSX.Element => {
               label: "Query Interval",
               description: "Interval to get telemetry data",
               properties: {
-                suffix: "seconds",
+                suffix: "Seconds",
               },
             },
             {
@@ -41,7 +41,7 @@ export const Telemetry = (): JSX.Element => {
               label: "Update Interval",
               description: "How often to send Metrics over the mesh",
               properties: {
-                suffix: "seconds",
+                suffix: "Seconds",
               },
             },
             {

src/components/Sidebar.tsx

@@ -11,6 +11,8 @@ import {
   MessageSquareIcon,
   SettingsIcon,
   UsersIcon,
+  ZapIcon,
+  BatteryMediumIcon
 } from "lucide-react";
 
 export interface SidebarProps {
@@ -58,7 +60,7 @@ export const Sidebar = ({ children }: SidebarProps): JSX.Element => {
 
   return (
     <div className="min-w-[280px] max-w-min flex-col overflow-y-auto border-r-[0.5px] border-slate-300 bg-transparent dark:border-slate-700">
-      <div className="flex justify-between px-8 py-6">
+      <div className="flex justify-between px-8 pt-6">
         <div>
           <span className="text-lg font-medium">
             {myNode?.user?.shortName ?? "UNK"}
@@ -73,6 +75,16 @@ export const Sidebar = ({ children }: SidebarProps): JSX.Element => {
           <EditIcon size={16} />
         </button>
       </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>
+        </div>
+        <div className="flex items-center">
+            <ZapIcon size={24} viewBox={'0 0 36 24'}/>
+            <Subtle>{myNode?.deviceMetrics?.voltage.toPrecision(3) ?? "UNK"} volts</Subtle>
+        </div>
+      </div>
 
       <SidebarSection label="Navigation">
         {pages.map((link) => (

src/components/Toaster.tsx

@@ -17,8 +17,8 @@ export function Toaster() {
       {toasts.map(({ id, title, description, action, ...props }) => (
         <Toast key={id} {...props}>
           <div className="grid gap-1">
-            {title && <ToastTitle>{title}</ToastTitle>}
-            {description && <ToastDescription>{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/Command.tsx

@@ -116,7 +116,7 @@ const CommandItem = React.forwardRef<
   <CommandPrimitive.Item
     ref={ref}
     className={cn(
-      "relative flex cursor-default select-none items-center rounded-md py-1.5 px-2 text-sm font-medium outline-none aria-selected:bg-slate-100 data-[disabled]:pointer-events-none data-[disabled]:opacity-50 dark:aria-selected:bg-slate-700",
+      "relative flex cursor-default select-none items-center rounded-md py-1.5 px-2 text-sm font-medium outline-none aria-selected:bg-slate-100 data-[disabled='true']:pointer-events-none data-[disabled='true']:opacity-50 dark:aria-selected:bg-slate-700",
       className,
     )}
     {...props}

src/components/UI/Input.tsx

@@ -32,7 +32,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
           {...props}
         />
         {suffix && (
-          <div className="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3 font-mono text-textSecondary">
+          <div className="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-9 font-mono text-textSecondary">
             <span className="text-gray-500 sm:text-sm">{suffix}</span>
           </div>
         )}