Add maps, Bluetooth config & fixes

src/components/Dialog/PeersDialog.tsx

@@ -11,8 +11,8 @@ import {
   Tooltip,
 } from "evergreen-ui";
 
-import { useDevice } from "@app/core/stores/deviceStore.js";
 import { toMGRS } from "@app/core/utils/toMGRS.js";
+import { useDevice } from "@core/providers/useDevice.js";
 import { Hashicon } from "@emeraldpay/hashicon-react";
 import { Protobuf } from "@meshtastic/meshtasticjs";
 

src/components/PageComponents/Config/Bluetooth.tsx

@@ -0,0 +1,100 @@
+import type React from "react";
+import { useEffect, useState } from "react";
+
+import { FormField, SelectField, Switch, TextInputField } from "evergreen-ui";
+import { Controller, useForm, useWatch } from "react-hook-form";
+
+import { BluetoothValidation } from "@app/validation/config/bluetooth.js";
+import { Form } from "@components/form/Form";
+import { useDevice } from "@core/providers/useDevice.js";
+import { renderOptions } from "@core/utils/selectEnumOptions.js";
+import { classValidatorResolver } from "@hookform/resolvers/class-validator";
+import { Protobuf } from "@meshtastic/meshtasticjs";
+
+export const Bluetooth = (): JSX.Element => {
+  const { config, connection } = useDevice();
+  const [loading, setLoading] = useState(false);
+
+  const {
+    register,
+    handleSubmit,
+    formState: { errors, isDirty },
+    control,
+    reset,
+  } = useForm<BluetoothValidation>({
+    defaultValues: config.bluetooth,
+    resolver: classValidatorResolver(BluetoothValidation),
+  });
+
+  useEffect(() => {
+    reset(config.bluetooth);
+  }, [reset, config.bluetooth]);
+
+  const onSubmit = handleSubmit((data) => {
+    setLoading(true);
+    void connection?.setConfig(
+      {
+        payloadVariant: {
+          oneofKind: "bluetooth",
+          bluetooth: data,
+        },
+      },
+      async () => {
+        reset({ ...data });
+        setLoading(false);
+        await Promise.resolve();
+      }
+    );
+  });
+
+  const pairingMode = useWatch({
+    control,
+    name: "mode",
+    defaultValue: Protobuf.Config_BluetoothConfig_PairingMode.RandomPin,
+  });
+
+  return (
+    <Form loading={loading} dirty={isDirty} onSubmit={onSubmit}>
+      <FormField
+        label="Bluetooth Enabled"
+        description="Description"
+        isInvalid={!!errors.enabled?.message}
+        validationMessage={errors.enabled?.message}
+      >
+        <Controller
+          name="enabled"
+          control={control}
+          render={({ field: { value, ...field } }) => (
+            <Switch height={24} marginLeft="auto" checked={value} {...field} />
+          )}
+        />
+      </FormField>
+
+      <SelectField
+        label="Pairing mode"
+        description="This is a description."
+        isInvalid={!!errors.mode?.message}
+        validationMessage={errors.mode?.message}
+        {...register("mode", { valueAsNumber: true })}
+      >
+        {renderOptions(Protobuf.Config_BluetoothConfig_PairingMode)}
+      </SelectField>
+
+      <TextInputField
+        display={
+          pairingMode !== Protobuf.Config_BluetoothConfig_PairingMode.FixedPin
+            ? "none"
+            : "block"
+        }
+        label="Pin"
+        description="This is a description."
+        type="number"
+        isInvalid={!!errors.fixedPin?.message}
+        validationMessage={errors.fixedPin?.message}
+        {...register("fixedPin", {
+          valueAsNumber: true,
+        })}
+      />
+    </Form>
+  );
+};

src/components/PageComponents/Config/Device.tsx

@@ -12,7 +12,7 @@ import { Controller, useForm } from "react-hook-form";
 
 import { DeviceValidation } from "@app/validation/config/device.js";
 import { Form } from "@components/form/Form";
-import { useDevice } from "@core/stores/deviceStore.js";
+import { useDevice } from "@core/providers/useDevice.js";
 import { renderOptions } from "@core/utils/selectEnumOptions.js";
 import { classValidatorResolver } from "@hookform/resolvers/class-validator";
 import { Protobuf } from "@meshtastic/meshtasticjs";

src/components/PageComponents/Config/Display.tsx

@@ -6,7 +6,7 @@ import { Controller, useForm } from "react-hook-form";
 
 import { DisplayValidation } from "@app/validation/config/display.js";
 import { Form } from "@components/form/Form";
-import { useDevice } from "@core/stores/deviceStore.js";
+import { useDevice } from "@core/providers/useDevice.js";
 import { renderOptions } from "@core/utils/selectEnumOptions.js";
 import { classValidatorResolver } from "@hookform/resolvers/class-validator";
 import { Protobuf } from "@meshtastic/meshtasticjs";

src/components/PageComponents/Config/LoRa.tsx

@@ -6,7 +6,7 @@ import { Controller, useForm } from "react-hook-form";
 
 import { LoRaValidation } from "@app/validation/config/lora.js";
 import { Form } from "@components/form/Form";
-import { useDevice } from "@core/stores/deviceStore.js";
+import { useDevice } from "@core/providers/useDevice.js";
 import { renderOptions } from "@core/utils/selectEnumOptions.js";
 import { classValidatorResolver } from "@hookform/resolvers/class-validator";
 import { Protobuf } from "@meshtastic/meshtasticjs";

src/components/PageComponents/Config/Position.tsx

@@ -12,7 +12,7 @@ import { Controller, useForm } from "react-hook-form";
 
 import { PositionValidation } from "@app/validation/config/position.js";
 import { Form } from "@components/form/Form";
-import { useDevice } from "@core/stores/deviceStore.js";
+import { useDevice } from "@core/providers/useDevice.js";
 import { bitwiseDecode } from "@core/utils/bitwise";
 import { classValidatorResolver } from "@hookform/resolvers/class-validator";
 import { Protobuf } from "@meshtastic/meshtasticjs";

src/components/PageComponents/Config/Power.tsx

@@ -6,7 +6,7 @@ import { Controller, useForm } from "react-hook-form";
 
 import { PowerValidation } from "@app/validation/config/power.js";
 import { Form } from "@components/form/Form";
-import { useDevice } from "@core/stores/deviceStore.js";
+import { useDevice } from "@core/providers/useDevice.js";
 import { renderOptions } from "@core/utils/selectEnumOptions.js";
 import { classValidatorResolver } from "@hookform/resolvers/class-validator";
 import { Protobuf } from "@meshtastic/meshtasticjs";

src/components/PageComponents/Config/User.tsx

@@ -7,7 +7,7 @@ import { base16 } from "rfc4648";
 
 import { UserValidation } from "@app/validation/config/user.js";
 import { Form } from "@components/form/Form";
-import { useDevice } from "@core/stores/deviceStore.js";
+import { useDevice } from "@core/providers/useDevice.js";
 import { renderOptions } from "@core/utils/selectEnumOptions.js";
 import { classValidatorResolver } from "@hookform/resolvers/class-validator";
 import { Protobuf } from "@meshtastic/meshtasticjs";

src/components/PageComponents/Config/WiFi.tsx

@@ -13,7 +13,7 @@ import { Controller, useForm, useWatch } from "react-hook-form";
 import { renderOptions } from "@app/core/utils/selectEnumOptions.js";
 import { WiFiValidation } from "@app/validation/config/wifi.js";
 import { Form } from "@components/form/Form";
-import { useDevice } from "@core/stores/deviceStore.js";
+import { useDevice } from "@core/providers/useDevice.js";
 import { classValidatorResolver } from "@hookform/resolvers/class-validator";
 import { Protobuf } from "@meshtastic/meshtasticjs";
 

src/components/PageComponents/ModuleConfig/CannedMessage.tsx

@@ -6,7 +6,7 @@ import { Controller, useForm, useWatch } from "react-hook-form";
 
 import { CannedMessageValidation } from "@app/validation/moduleConfig/cannedMessage.js";
 import { Form } from "@components/form/Form";
-import { useDevice } from "@core/stores/deviceStore.js";
+import { useDevice } from "@core/providers/useDevice.js";
 import { renderOptions } from "@core/utils/selectEnumOptions.js";
 import { classValidatorResolver } from "@hookform/resolvers/class-validator";
 import { Protobuf } from "@meshtastic/meshtasticjs";

src/components/PageComponents/ModuleConfig/ExternalNotification.tsx

@@ -6,7 +6,7 @@ import { Controller, useForm, useWatch } from "react-hook-form";
 
 import { ExternalNotificationValidation } from "@app/validation/moduleConfig/externalNotification.js";
 import { Form } from "@components/form/Form";
-import { useDevice } from "@core/stores/deviceStore.js";
+import { useDevice } from "@core/providers/useDevice.js";
 import { classValidatorResolver } from "@hookform/resolvers/class-validator";
 
 export const ExternalNotification = (): JSX.Element => {

src/components/PageComponents/ModuleConfig/MQTT.tsx

@@ -6,7 +6,7 @@ import { Controller, useForm, useWatch } from "react-hook-form";
 
 import { MQTTValidation } from "@app/validation/moduleConfig/mqtt.js";
 import { Form } from "@components/form/Form";
-import { useDevice } from "@core/stores/deviceStore.js";
+import { useDevice } from "@core/providers/useDevice.js";
 import { classValidatorResolver } from "@hookform/resolvers/class-validator";
 
 export const MQTT = (): JSX.Element => {

src/components/PageComponents/ModuleConfig/RangeTest.tsx

@@ -6,7 +6,7 @@ import { Controller, useForm, useWatch } from "react-hook-form";
 
 import { RangeTestValidation } from "@app/validation/moduleConfig/rangeTest.js";
 import { Form } from "@components/form/Form";
-import { useDevice } from "@core/stores/deviceStore.js";
+import { useDevice } from "@core/providers/useDevice.js";
 import { classValidatorResolver } from "@hookform/resolvers/class-validator";
 
 export const RangeTest = (): JSX.Element => {

src/components/PageComponents/ModuleConfig/Serial.tsx

@@ -6,7 +6,7 @@ import { Controller, useForm, useWatch } from "react-hook-form";
 
 import { SerialValidation } from "@app/validation/moduleConfig/serial.js";
 import { Form } from "@components/form/Form";
-import { useDevice } from "@core/stores/deviceStore.js";
+import { useDevice } from "@core/providers/useDevice.js";
 import { classValidatorResolver } from "@hookform/resolvers/class-validator";
 
 export const Serial = (): JSX.Element => {

src/components/PageComponents/ModuleConfig/StoreForward.tsx

@@ -6,7 +6,7 @@ import { Controller, useForm, useWatch } from "react-hook-form";
 
 import { StoreForwardValidation } from "@app/validation/moduleConfig/storeForward.js";
 import { Form } from "@components/form/Form";
-import { useDevice } from "@core/stores/deviceStore.js";
+import { useDevice } from "@core/providers/useDevice.js";
 import { classValidatorResolver } from "@hookform/resolvers/class-validator";
 
 export const StoreForward = (): JSX.Element => {

src/components/PageComponents/ModuleConfig/Telemetry.tsx

@@ -6,7 +6,7 @@ import { Controller, useForm } from "react-hook-form";
 
 import { TelemetryValidation } from "@app/validation/moduleConfig/telemetry.js";
 import { Form } from "@components/form/Form";
-import { useDevice } from "@core/stores/deviceStore.js";
+import { useDevice } from "@core/providers/useDevice.js";
 import { classValidatorResolver } from "@hookform/resolvers/class-validator";
 
 export const Telemetry = (): JSX.Element => {

src/components/Progress.tsx

@@ -9,7 +9,7 @@ import {
   StatusIndicator,
 } from "evergreen-ui";
 
-import { useDevice } from "@app/core/stores/deviceStore.js";
+import { useDevice } from "@core/providers/useDevice.js";
 
 export const Progress = (): JSX.Element => {
   const {

src/components/SlideSheets/PeerInfo.tsx

@@ -3,7 +3,8 @@ import { useEffect, useState } from "react";
 
 import { GeolocationIcon, Pane, PropertyIcon, SideSheet } from "evergreen-ui";
 
-import { Node, useDevice } from "@app/core/stores/deviceStore.js";
+import { useDevice } from "@core/providers/useDevice.js";
+import type { Node } from "@core/stores/deviceStore.js";
 import { Hashicon } from "@emeraldpay/hashicon-react";
 import { Protobuf } from "@meshtastic/meshtasticjs";
 
@@ -14,7 +15,6 @@ import { Overview } from "./tabs/nodes/Overview.js";
 
 export const PeerInfo = () => {
   const { peerInfoOpen, activePeer, setPeerInfoOpen, nodes } = useDevice();
-  const [selectedTab, setSelectedTab] = useState(0);
   const [node, setNode] = useState<Node | undefined>();
 
   useEffect(() => {

src/components/form/Form.tsx

@@ -1,8 +1,7 @@
 import type React from "react";
 import type { HTMLProps } from "react";
 
-import { Button, majorScale, Pane, Spinner } from "evergreen-ui";
-import { FiSave } from "react-icons/fi";
+import { Button, majorScale, Pane, SavedIcon, Spinner } from "evergreen-ui";
 
 export interface FormProps extends HTMLProps<HTMLFormElement> {
   onSubmit: (event: React.FormEvent<HTMLFormElement>) => Promise<void>;
@@ -39,7 +38,7 @@ export const Form = ({
           type="submit"
           marginLeft="auto"
           disabled={!dirty}
-          iconBefore={<FiSave />}
+          iconBefore={<SavedIcon />}
         >
           Save
         </Button>

src/components/layout/Sidebar/DeviceCard.tsx

@@ -11,7 +11,7 @@ import {
 import { FiBluetooth, FiTerminal, FiWifi } from "react-icons/fi";
 
 import { toMGRS } from "@app/core/utils/toMGRS.js";
-import { useDevice } from "@core/stores/deviceStore.js";
+import { useDevice } from "@core/providers/useDevice.js";
 import { Hashicon } from "@emeraldpay/hashicon-react";
 import { Types } from "@meshtastic/meshtasticjs";
 
@@ -33,7 +33,7 @@ export const DeviceCard = (): JSX.Element => {
           <Heading>{myNode?.data.user?.longName}</Heading>
           <Link
             target="_blank"
-            href="https://github.com/meshtastic/meshtastic-web/releases/"
+            href="https://github.com/meshtastic/meshtastic-device/releases/"
           >
             <Badge
               color="green"

src/components/layout/Sidebar/index.tsx

@@ -17,7 +17,8 @@ import {
 } from "evergreen-ui";
 
 import { PeersDialog } from "@app/components/Dialog/PeersDialog.js";
-import { Page, useDevice } from "@app/core/stores/deviceStore.js";
+import { useDevice } from "@core/providers/useDevice.js";
+import type { Page } from "@core/stores/deviceStore.js";
 
 import { DeviceCard } from "./DeviceCard.js";
 
@@ -42,7 +43,6 @@ export const Sidebar = (): JSX.Element => {
       name: "Map",
       icon: GlobeIcon,
       page: "map",
-      disabled: true,
     },
     {
       name: "Extensions",