start editSettings support

src/core/stores/deviceStore.ts

@@ -56,6 +56,7 @@ export interface Device {
   regionUnset: boolean;
   currentMetrics: Protobuf.DeviceMetrics;
   QRDialogOpen: boolean;
+  pendingSettingsChanges: boolean;
 
   setReady(ready: boolean): void;
   setStatus: (status: Types.DeviceStatusEnum) => void;
@@ -66,6 +67,7 @@ export interface Device {
   setActivePage: (page: Page) => void;
   setPeerInfoOpen: (open: boolean) => void;
   setActivePeer: (peer: number) => void;
+  setPendingSettingsChanges: (state: boolean) => void;
   addChannel: (channel: Channel) => void;
   addWaypoint: (waypoint: Protobuf.Waypoint) => void;
   addNodeInfo: (nodeInfo: Types.NodeInfoPacket) => void;
@@ -113,6 +115,7 @@ export const useDeviceStore = create<DeviceState>((set, get) => ({
           regionUnset: false,
           currentMetrics: Protobuf.DeviceMetrics.create(),
           QRDialogOpen: false,
+          pendingSettingsChanges: false,
 
           setReady: (ready: boolean) => {
             set(
@@ -294,6 +297,16 @@ export const useDeviceStore = create<DeviceState>((set, get) => ({
               })
             );
           },
+          setPendingSettingsChanges: (state) => {
+            set(
+              produce<DeviceState>((draft) => {
+                const device = draft.devices.get(id);
+                if (device) {
+                  device.pendingSettingsChanges = state;
+                }
+              })
+            );
+          },
           addChannel: (channel: Channel) => {
             set(
               produce<DeviceState>((draft) => {

src/core/subscriptions.ts

@@ -89,4 +89,8 @@ export const subscribeAll = (
       ack: messagePacket.packet.from !== myNodeNum
     });
   });
+
+  connection.onPendingSettingsChange.subscribe((state) => {
+    device.setPendingSettingsChanges(state);
+  });
 };

src/pages/Config/index.tsx

@@ -1,6 +1,8 @@
 import type React from "react";
 
+import { Button } from "@app/components/form/Button.js";
 import { TabbedContent, TabType } from "@app/components/generic/TabbedContent";
+import { useDevice } from "@app/core/providers/useDevice.js";
 import {
   Cog8ToothIcon,
   CubeTransparentIcon,
@@ -11,6 +13,8 @@ import { DeviceConfig } from "@pages/Config/DeviceConfig.js";
 import { ModuleConfig } from "@pages/Config/ModuleConfig.js";
 
 export const ConfigPage = (): JSX.Element => {
+  const { connection, pendingSettingsChanges } = useDevice();
+
   const tabs: TabType[] = [
     {
       name: "Device Config",
@@ -29,5 +33,20 @@ export const ConfigPage = (): JSX.Element => {
     }
   ];
 
-  return <TabbedContent tabs={tabs} />;
+  return (
+    <TabbedContent
+      tabs={tabs}
+      actions={[
+        () => (
+          <Button
+            disabled={!pendingSettingsChanges}
+            onClick={connection?.commitEditSettings}
+            variant="primary"
+          >
+            Commit Changes
+          </Button>
+        )
+      ]}
+    />
+  );
 };