start editSettings support

4 years ago · fad08fe806
5 changed files with 111 additions and 75 deletions
--- a/package.json
+++ b/package.json
@ -27,7 +27,7 @@
    "@heroicons/react": "^2.0.13",
    "@hookform/error-message": "^2.0.1",
    "@hookform/resolvers": "^2.9.10",
-    "@meshtastic/meshtasticjs": "^0.7.1",
+    "@meshtastic/meshtasticjs": "^0.7.2",
    "@tailwindcss/line-clamp": "^0.4.2",
    "@tailwindcss/typography": "^0.5.8",
    "base64-js": "^1.5.1",
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@ -6,7 +6,7 @@ specifiers:
  '@heroicons/react': ^2.0.13
  '@hookform/error-message': ^2.0.1
  '@hookform/resolvers': ^2.9.10
-  '@meshtastic/meshtasticjs': ^0.7.1
+  '@meshtastic/meshtasticjs': ^0.7.2
  '@tailwindcss/forms': ^0.5.3
  '@tailwindcss/line-clamp': ^0.4.2
  '@tailwindcss/typography': ^0.5.8
@ -69,7 +69,7 @@ dependencies:
  '@heroicons/react': 2.0[email protected]
  '@hookform/error-message': 2.0.1_nrnvpvixg5xdweezd67llqjwze
  '@hookform/resolvers': 2.9[email protected]
-  '@meshtastic/meshtasticjs': 0.7.1
+  '@meshtastic/meshtasticjs': 0.7.2
  '@tailwindcss/line-clamp': 0.4[email protected]
  '@tailwindcss/typography': 0.5[email protected]
  base64-js: 1.5.1
@ -385,8 +385,8 @@ packages:
      js-sha3: 0.8.0
    dev: false

-  /@esbuild/android-arm/0.16.3:
-    resolution: {integrity: sha512-mueuEoh+s1eRbSJqq9KNBQwI4QhQV6sRXIfTyLXSHGMpyew61rOK4qY21uKbXl1iBoMb0AdL1deWFCQVlN2qHA==}
+  /@esbuild/android-arm/0.16.4:
+    resolution: {integrity: sha512-rZzb7r22m20S1S7ufIc6DC6W659yxoOrl7sKP1nCYhuvUlnCFHVSbATG4keGUtV8rDz11sRRDbWkvQZpzPaHiw==}
    engines: {node: '>=12'}
    cpu: [arm]
    os: [android]
@ -394,8 +394,8 @@ packages:
    dev: true
    optional: true

-  /@esbuild/android-arm64/0.16.3:
-    resolution: {integrity: sha512-RolFVeinkeraDvN/OoRf1F/lP0KUfGNb5jxy/vkIMeRRChkrX/HTYN6TYZosRJs3a1+8wqpxAo5PI5hFmxyPRg==}
+  /@esbuild/android-arm64/0.16.4:
+    resolution: {integrity: sha512-VPuTzXFm/m2fcGfN6CiwZTlLzxrKsWbPkG7ArRFpuxyaHUm/XFHQPD4xNwZT6uUmpIHhnSjcaCmcla8COzmZ5Q==}
    engines: {node: '>=12'}
    cpu: [arm64]
    os: [android]
@ -403,8 +403,8 @@ packages:
    dev: true
    optional: true

-  /@esbuild/android-x64/0.16.3:
-    resolution: {integrity: sha512-SFpTUcIT1bIJuCCBMCQWq1bL2gPTjWoLZdjmIhjdcQHaUfV41OQfho6Ici5uvvkMmZRXIUGpM3GxysP/EU7ifQ==}
+  /@esbuild/android-x64/0.16.4:
+    resolution: {integrity: sha512-MW+B2O++BkcOfMWmuHXB15/l1i7wXhJFqbJhp82IBOais8RBEQv2vQz/jHrDEHaY2X0QY7Wfw86SBL2PbVOr0g==}
    engines: {node: '>=12'}
    cpu: [x64]
    os: [android]
@ -412,8 +412,8 @@ packages:
    dev: true
    optional: true

-  /@esbuild/darwin-arm64/0.16.3:
-    resolution: {integrity: sha512-DO8WykMyB+N9mIDfI/Hug70Dk1KipavlGAecxS3jDUwAbTpDXj0Lcwzw9svkhxfpCagDmpaTMgxWK8/C/XcXvw==}
+  /@esbuild/darwin-arm64/0.16.4:
+    resolution: {integrity: sha512-a28X1O//aOfxwJVZVs7ZfM8Tyih2Za4nKJrBwW5Wm4yKsnwBy9aiS/xwpxiiTRttw3EaTg4Srerhcm6z0bu9Wg==}
    engines: {node: '>=12'}
    cpu: [arm64]
    os: [darwin]
@ -421,8 +421,8 @@ packages:
    dev: true
    optional: true

-  /@esbuild/darwin-x64/0.16.3:
-    resolution: {integrity: sha512-uEqZQ2omc6BvWqdCiyZ5+XmxuHEi1SPzpVxXCSSV2+Sh7sbXbpeNhHIeFrIpRjAs0lI1FmA1iIOxFozKBhKgRQ==}
+  /@esbuild/darwin-x64/0.16.4:
+    resolution: {integrity: sha512-e3doCr6Ecfwd7VzlaQqEPrnbvvPjE9uoTpxG5pyLzr2rI2NMjDHmvY1E5EO81O/e9TUOLLkXA5m6T8lfjK9yAA==}
    engines: {node: '>=12'}
    cpu: [x64]
    os: [darwin]
@ -430,8 +430,8 @@ packages:
    dev: true
    optional: true

-  /@esbuild/freebsd-arm64/0.16.3:
-    resolution: {integrity: sha512-nJansp3sSXakNkOD5i5mIz2Is/HjzIhFs49b1tjrPrpCmwgBmH9SSzhC/Z1UqlkivqMYkhfPwMw1dGFUuwmXhw==}
+  /@esbuild/freebsd-arm64/0.16.4:
+    resolution: {integrity: sha512-Oup3G/QxBgvvqnXWrBed7xxkFNwAwJVHZcklWyQt7YCAL5bfUkaa6FVWnR78rNQiM8MqqLiT6ZTZSdUFuVIg1w==}
    engines: {node: '>=12'}
    cpu: [arm64]
    os: [freebsd]
@ -439,8 +439,8 @@ packages:
    dev: true
    optional: true

-  /@esbuild/freebsd-x64/0.16.3:
-    resolution: {integrity: sha512-TfoDzLw+QHfc4a8aKtGSQ96Wa+6eimljjkq9HKR0rHlU83vw8aldMOUSJTUDxbcUdcgnJzPaX8/vGWm7vyV7ug==}
+  /@esbuild/freebsd-x64/0.16.4:
+    resolution: {integrity: sha512-vAP+eYOxlN/Bpo/TZmzEQapNS8W1njECrqkTpNgvXskkkJC2AwOXwZWai/Kc2vEFZUXQttx6UJbj9grqjD/+9Q==}
    engines: {node: '>=12'}
    cpu: [x64]
    os: [freebsd]
@ -448,8 +448,8 @@ packages:
    dev: true
    optional: true

-  /@esbuild/linux-arm/0.16.3:
-    resolution: {integrity: sha512-VwswmSYwVAAq6LysV59Fyqk3UIjbhuc6wb3vEcJ7HEJUtFuLK9uXWuFoH1lulEbE4+5GjtHi3MHX+w1gNHdOWQ==}
+  /@esbuild/linux-arm/0.16.4:
+    resolution: {integrity: sha512-A47ZmtpIPyERxkSvIv+zLd6kNIOtJH03XA0Hy7jaceRDdQaQVGSDt4mZqpWqJYgDk9rg96aglbF6kCRvPGDSUA==}
    engines: {node: '>=12'}
    cpu: [arm]
    os: [linux]
@ -457,8 +457,8 @@ packages:
    dev: true
    optional: true

-  /@esbuild/linux-arm64/0.16.3:
-    resolution: {integrity: sha512-7I3RlsnxEFCHVZNBLb2w7unamgZ5sVwO0/ikE2GaYvYuUQs9Qte/w7TqWcXHtCwxvZx/2+F97ndiUQAWs47ZfQ==}
+  /@esbuild/linux-arm64/0.16.4:
+    resolution: {integrity: sha512-2zXoBhv4r5pZiyjBKrOdFP4CXOChxXiYD50LRUU+65DkdS5niPFHbboKZd/c81l0ezpw7AQnHeoCy5hFrzzs4g==}
    engines: {node: '>=12'}
    cpu: [arm64]
    os: [linux]
@ -466,8 +466,8 @@ packages:
    dev: true
    optional: true

-  /@esbuild/linux-ia32/0.16.3:
-    resolution: {integrity: sha512-X8FDDxM9cqda2rJE+iblQhIMYY49LfvW4kaEjoFbTTQ4Go8G96Smj2w3BRTwA8IHGoi9dPOPGAX63dhuv19UqA==}
+  /@esbuild/linux-ia32/0.16.4:
+    resolution: {integrity: sha512-uxdSrpe9wFhz4yBwt2kl2TxS/NWEINYBUFIxQtaEVtglm1eECvsj1vEKI0KX2k2wCe17zDdQ3v+jVxfwVfvvjw==}
    engines: {node: '>=12'}
    cpu: [ia32]
    os: [linux]
@ -475,8 +475,8 @@ packages:
    dev: true
    optional: true

-  /@esbuild/linux-loong64/0.16.3:
-    resolution: {integrity: sha512-hIbeejCOyO0X9ujfIIOKjBjNAs9XD/YdJ9JXAy1lHA+8UXuOqbFe4ErMCqMr8dhlMGBuvcQYGF7+kO7waj2KHw==}
+  /@esbuild/linux-loong64/0.16.4:
+    resolution: {integrity: sha512-peDrrUuxbZ9Jw+DwLCh/9xmZAk0p0K1iY5d2IcwmnN+B87xw7kujOkig6ZRcZqgrXgeRGurRHn0ENMAjjD5DEg==}
    engines: {node: '>=12'}
    cpu: [loong64]
    os: [linux]
@ -484,8 +484,8 @@ packages:
    dev: true
    optional: true

-  /@esbuild/linux-mips64el/0.16.3:
-    resolution: {integrity: sha512-znFRzICT/V8VZQMt6rjb21MtAVJv/3dmKRMlohlShrbVXdBuOdDrGb+C2cZGQAR8RFyRe7HS6klmHq103WpmVw==}
+  /@esbuild/linux-mips64el/0.16.4:
+    resolution: {integrity: sha512-sD9EEUoGtVhFjjsauWjflZklTNr57KdQ6xfloO4yH1u7vNQlOfAlhEzbyBKfgbJlW7rwXYBdl5/NcZ+Mg2XhQA==}
    engines: {node: '>=12'}
    cpu: [mips64el]
    os: [linux]
@ -493,8 +493,8 @@ packages:
    dev: true
    optional: true

-  /@esbuild/linux-ppc64/0.16.3:
-    resolution: {integrity: sha512-EV7LuEybxhXrVTDpbqWF2yehYRNz5e5p+u3oQUS2+ZFpknyi1NXxr8URk4ykR8Efm7iu04//4sBg249yNOwy5Q==}
+  /@esbuild/linux-ppc64/0.16.4:
+    resolution: {integrity: sha512-X1HSqHUX9D+d0l6/nIh4ZZJ94eQky8d8z6yxAptpZE3FxCWYWvTDd9X9ST84MGZEJx04VYUD/AGgciddwO0b8g==}
    engines: {node: '>=12'}
    cpu: [ppc64]
    os: [linux]
@ -502,8 +502,8 @@ packages:
    dev: true
    optional: true

-  /@esbuild/linux-riscv64/0.16.3:
-    resolution: {integrity: sha512-uDxqFOcLzFIJ+r/pkTTSE9lsCEaV/Y6rMlQjUI9BkzASEChYL/aSQjZjchtEmdnVxDKETnUAmsaZ4pqK1eE5BQ==}
+  /@esbuild/linux-riscv64/0.16.4:
+    resolution: {integrity: sha512-97ANpzyNp0GTXCt6SRdIx1ngwncpkV/z453ZuxbnBROCJ5p/55UjhbaG23UdHj88fGWLKPFtMoU4CBacz4j9FA==}
    engines: {node: '>=12'}
    cpu: [riscv64]
    os: [linux]
@ -511,8 +511,8 @@ packages:
    dev: true
    optional: true

-  /@esbuild/linux-s390x/0.16.3:
-    resolution: {integrity: sha512-NbeREhzSxYwFhnCAQOQZmajsPYtX71Ufej3IQ8W2Gxskfz9DK58ENEju4SbpIj48VenktRASC52N5Fhyf/aliQ==}
+  /@esbuild/linux-s390x/0.16.4:
+    resolution: {integrity: sha512-pUvPQLPmbEeJRPjP0DYTC1vjHyhrnCklQmCGYbipkep+oyfTn7GTBJXoPodR7ZS5upmEyc8lzAkn2o29wD786A==}
    engines: {node: '>=12'}
    cpu: [s390x]
    os: [linux]
@ -520,8 +520,8 @@ packages:
    dev: true
    optional: true

-  /@esbuild/linux-x64/0.16.3:
-    resolution: {integrity: sha512-SDiG0nCixYO9JgpehoKgScwic7vXXndfasjnD5DLbp1xltANzqZ425l7LSdHynt19UWOcDjG9wJJzSElsPvk0w==}
+  /@esbuild/linux-x64/0.16.4:
+    resolution: {integrity: sha512-N55Q0mJs3Sl8+utPRPBrL6NLYZKBCLLx0bme/+RbjvMforTGGzFvsRl4xLTZMUBFC1poDzBEPTEu5nxizQ9Nlw==}
    engines: {node: '>=12'}
    cpu: [x64]
    os: [linux]
@ -529,8 +529,8 @@ packages:
    dev: true
    optional: true

-  /@esbuild/netbsd-x64/0.16.3:
-    resolution: {integrity: sha512-AzbsJqiHEq1I/tUvOfAzCY15h4/7Ivp3ff/o1GpP16n48JMNAtbW0qui2WCgoIZArEHD0SUQ95gvR0oSO7ZbdA==}
+  /@esbuild/netbsd-x64/0.16.4:
+    resolution: {integrity: sha512-LHSJLit8jCObEQNYkgsDYBh2JrJT53oJO2HVdkSYLa6+zuLJh0lAr06brXIkljrlI+N7NNW1IAXGn/6IZPi3YQ==}
    engines: {node: '>=12'}
    cpu: [x64]
    os: [netbsd]
@ -538,8 +538,8 @@ packages:
    dev: true
    optional: true

-  /@esbuild/openbsd-x64/0.16.3:
-    resolution: {integrity: sha512-gSABi8qHl8k3Cbi/4toAzHiykuBuWLZs43JomTcXkjMZVkp0gj3gg9mO+9HJW/8GB5H89RX/V0QP4JGL7YEEVg==}
+  /@esbuild/openbsd-x64/0.16.4:
+    resolution: {integrity: sha512-nLgdc6tWEhcCFg/WVFaUxHcPK3AP/bh+KEwKtl69Ay5IBqUwKDaq/6Xk0E+fh/FGjnLwqFSsarsbPHeKM8t8Sw==}
    engines: {node: '>=12'}
    cpu: [x64]
    os: [openbsd]
@ -547,8 +547,8 @@ packages:
    dev: true
    optional: true

-  /@esbuild/sunos-x64/0.16.3:
-    resolution: {integrity: sha512-SF9Kch5Ete4reovvRO6yNjMxrvlfT0F0Flm+NPoUw5Z4Q3r1d23LFTgaLwm3Cp0iGbrU/MoUI+ZqwCv5XJijCw==}
+  /@esbuild/sunos-x64/0.16.4:
+    resolution: {integrity: sha512-08SluG24GjPO3tXKk95/85n9kpyZtXCVwURR2i4myhrOfi3jspClV0xQQ0W0PYWHioJj+LejFMt41q+PG3mlAQ==}
    engines: {node: '>=12'}
    cpu: [x64]
    os: [sunos]
@ -556,8 +556,8 @@ packages:
    dev: true
    optional: true

-  /@esbuild/win32-arm64/0.16.3:
-    resolution: {integrity: sha512-u5aBonZIyGopAZyOnoPAA6fGsDeHByZ9CnEzyML9NqntK6D/xl5jteZUKm/p6nD09+v3pTM6TuUIqSPcChk5gg==}
+  /@esbuild/win32-arm64/0.16.4:
+    resolution: {integrity: sha512-yYiRDQcqLYQSvNQcBKN7XogbrSvBE45FEQdH8fuXPl7cngzkCvpsG2H9Uey39IjQ6gqqc+Q4VXYHsQcKW0OMjQ==}
    engines: {node: '>=12'}
    cpu: [arm64]
    os: [win32]
@ -565,8 +565,8 @@ packages:
    dev: true
    optional: true

-  /@esbuild/win32-ia32/0.16.3:
-    resolution: {integrity: sha512-GlgVq1WpvOEhNioh74TKelwla9KDuAaLZrdxuuUgsP2vayxeLgVc+rbpIv0IYF4+tlIzq2vRhofV+KGLD+37EQ==}
+  /@esbuild/win32-ia32/0.16.4:
+    resolution: {integrity: sha512-5rabnGIqexekYkh9zXG5waotq8mrdlRoBqAktjx2W3kb0zsI83mdCwrcAeKYirnUaTGztR5TxXcXmQrEzny83w==}
    engines: {node: '>=12'}
    cpu: [ia32]
    os: [win32]
@ -574,8 +574,8 @@ packages:
    dev: true
    optional: true

-  /@esbuild/win32-x64/0.16.3:
-    resolution: {integrity: sha512-5/JuTd8OWW8UzEtyf19fbrtMJENza+C9JoPIkvItgTBQ1FO2ZLvjbPO6Xs54vk0s5JB5QsfieUEshRQfu7ZHow==}
+  /@esbuild/win32-x64/0.16.4:
+    resolution: {integrity: sha512-sN/I8FMPtmtT2Yw+Dly8Ur5vQ5a/RmC8hW7jO9PtPSQUPkowxWpcUZnqOggU7VwyT3Xkj6vcXWd3V/qTXwultQ==}
    engines: {node: '>=12'}
    cpu: [x64]
    os: [win32]
@ -785,8 +785,8 @@ packages:
    engines: {node: '>=6.0.0'}
    dev: false

-  /@meshtastic/meshtasticjs/0.7.1:
-    resolution: {integrity: sha512-BEO1nZ0dZ3d3oufe6UryFoi++BR/KmHdC4UX9cqg4YIM8jR+Q2iSPpQ4O2X+/wPmfk0cVvBbrk3F6Ap32T/7sA==}
+  /@meshtastic/meshtasticjs/0.7.2:
+    resolution: {integrity: sha512-RJCJLtlGUn7To+I4MnxuSDxwWK/MgAAfbfq+Naib6fve2VQEBu2CPF2Iy0A+wAHxR1ygOKcS8VbyS2D1FAQhcw==}
    dependencies:
      '@protobuf-ts/runtime': 2.8.2
      glob: 8.0.3
@ -1818,34 +1818,34 @@ packages:
      is-symbol: 1.0.4
    dev: true

-  /esbuild/0.16.3:
-    resolution: {integrity: sha512-71f7EjPWTiSguen8X/kxEpkAS7BFHwtQKisCDDV3Y4GLGWBaoSCyD5uXkaUew6JDzA9FEN1W23mdnSwW9kqCeg==}
+  /esbuild/0.16.4:
+    resolution: {integrity: sha512-qQrPMQpPTWf8jHugLWHoGqZjApyx3OEm76dlTXobHwh/EBbavbRdjXdYi/GWr43GyN0sfpap14GPkb05NH3ROA==}
    engines: {node: '>=12'}
    hasBin: true
    requiresBuild: true
    optionalDependencies:
-      '@esbuild/android-arm': 0.16.3
-      '@esbuild/android-arm64': 0.16.3
-      '@esbuild/android-x64': 0.16.3
-      '@esbuild/darwin-arm64': 0.16.3
-      '@esbuild/darwin-x64': 0.16.3
-      '@esbuild/freebsd-arm64': 0.16.3
-      '@esbuild/freebsd-x64': 0.16.3
-      '@esbuild/linux-arm': 0.16.3
-      '@esbuild/linux-arm64': 0.16.3
-      '@esbuild/linux-ia32': 0.16.3
-      '@esbuild/linux-loong64': 0.16.3
-      '@esbuild/linux-mips64el': 0.16.3
-      '@esbuild/linux-ppc64': 0.16.3
-      '@esbuild/linux-riscv64': 0.16.3
-      '@esbuild/linux-s390x': 0.16.3
-      '@esbuild/linux-x64': 0.16.3
-      '@esbuild/netbsd-x64': 0.16.3
-      '@esbuild/openbsd-x64': 0.16.3
-      '@esbuild/sunos-x64': 0.16.3
-      '@esbuild/win32-arm64': 0.16.3
-      '@esbuild/win32-ia32': 0.16.3
-      '@esbuild/win32-x64': 0.16.3
+      '@esbuild/android-arm': 0.16.4
+      '@esbuild/android-arm64': 0.16.4
+      '@esbuild/android-x64': 0.16.4
+      '@esbuild/darwin-arm64': 0.16.4
+      '@esbuild/darwin-x64': 0.16.4
+      '@esbuild/freebsd-arm64': 0.16.4
+      '@esbuild/freebsd-x64': 0.16.4
+      '@esbuild/linux-arm': 0.16.4
+      '@esbuild/linux-arm64': 0.16.4
+      '@esbuild/linux-ia32': 0.16.4
+      '@esbuild/linux-loong64': 0.16.4
+      '@esbuild/linux-mips64el': 0.16.4
+      '@esbuild/linux-ppc64': 0.16.4
+      '@esbuild/linux-riscv64': 0.16.4
+      '@esbuild/linux-s390x': 0.16.4
+      '@esbuild/linux-x64': 0.16.4
+      '@esbuild/netbsd-x64': 0.16.4
+      '@esbuild/openbsd-x64': 0.16.4
+      '@esbuild/sunos-x64': 0.16.4
+      '@esbuild/win32-arm64': 0.16.4
+      '@esbuild/win32-ia32': 0.16.4
+      '@esbuild/win32-x64': 0.16.4
    dev: true

  /escalade/3.1.1:
@ -4317,7 +4317,7 @@ packages:
        optional: true
    dependencies:
      '@types/node': 18.11.12
-      esbuild: 0.16.3
+      esbuild: 0.16.4
      postcss: 8.4.19
      resolve: 1.22.1
      rollup: 3.7.1
--- a/src/core/stores/deviceStore.ts
+++ b/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) => {
--- a/src/core/subscriptions.ts
+++ b/src/core/subscriptions.ts
@ -89,4 +89,8 @@ export const subscribeAll = (
      ack: messagePacket.packet.from !== myNodeNum
    });
  });
+
+  connection.onPendingSettingsChange.subscribe((state) => {
+    device.setPendingSettingsChanges(state);
+  });
 };
--- a/src/pages/Config/index.tsx
+++ b/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>
+        )
+      ]}
+    />
+  );
 };