From 664fd1c2d0a0d17c0e337be285542833d67ec27e Mon Sep 17 00:00:00 2001
From: Dan Ditomaso <dan.ditomaso@gmail.com>
Date: Wed, 19 Feb 2025 10:11:42 -0500
Subject: [PATCH 1/7] chore: format file

---
 src/components/PageComponents/Connect/HTTP.tsx | 17 +++++++----------
 1 file changed, 7 insertions(+), 10 deletions(-)

diff --git a/src/components/PageComponents/Connect/HTTP.tsx b/src/components/PageComponents/Connect/HTTP.tsx
index 0e1e6603..7eb39e95 100644
--- a/src/components/PageComponents/Connect/HTTP.tsx
+++ b/src/components/PageComponents/Connect/HTTP.tsx
@@ -28,13 +28,8 @@ export const HTTP = ({ closeDialog }: TabElementProps): JSX.Element => {
     },
   });
 
-  const tlsEnabled = useWatch({
-    control,
-    name: "tls",
-    defaultValue: location.protocol === "https:",
-  });
-
   const [connectionInProgress, setConnectionInProgress] = useState(false);
+  const [https, setHTTPS] = useState(false);
 
   const onSubmit = handleSubmit(async (data) => {
     setConnectionInProgress(true);
@@ -46,7 +41,7 @@ export const HTTP = ({ closeDialog }: TabElementProps): JSX.Element => {
     await connection.connect({
       address: data.ip,
       fetchInterval: 2000,
-      tls: data.tls,
+      tls: https,
     });
 
     setSelectedDevice(id);
@@ -60,8 +55,7 @@ export const HTTP = ({ closeDialog }: TabElementProps): JSX.Element => {
       <div className="flex h-48 flex-col gap-2">
         <Label>IP Address/Hostname</Label>
         <Input
-          // label="IP Address/Hostname"
-          prefix={tlsEnabled ? "https://" : "http://"}
+          prefix={https ? "https://" : "http://"}
           placeholder="000.000.000.000 / meshtastic.local"
           disabled={connectionInProgress}
           {...register("ip")}
@@ -71,8 +65,11 @@ export const HTTP = ({ closeDialog }: TabElementProps): JSX.Element => {
           control={control}
           render={({ field: { value, ...rest } }) => (
             <>
-              <Label>Use TLS</Label>
+              <Label>Use HTTPS</Label>
               <Switch
+                onCheckedChange={(checked) => {
+                  checked ? setHTTPS(true) : setHTTPS(false);
+                }}
                 // label="Use TLS"
                 // description="Description"
                 disabled={

From 033409351eaddc9b2f1edbe9142650872b3a2ee7 Mon Sep 17 00:00:00 2001
From: Dan Ditomaso <dan.ditomaso@gmail.com>
Date: Wed, 19 Feb 2025 10:22:21 -0500
Subject: [PATCH 2/7] fix: allow app to build without require formatting

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index a1441b0d..93129898 100644
--- a/package.json
+++ b/package.json
@@ -5,7 +5,7 @@
   "description": "Meshtastic web client",
   "license": "GPL-3.0-only",
   "scripts": {
-    "build": "pnpm check && rsbuild build",
+    "build": "rsbuild build",
     "build:analyze": "BUNDLE_ANALYZE=true rsbuild build",
     "check": "biome check src/",
     "check:fix": "pnpm check --write src/",

From e9b6c2495c7cd48de025089d1e4c8dac64f383f9 Mon Sep 17 00:00:00 2001
From: Dan Ditomaso <dan.ditomaso@gmail.com>
Date: Wed, 19 Feb 2025 11:28:23 -0500
Subject: [PATCH 3/7] feat: apply biome formatting as github action

---
 .github/workflows/format.yml | 46 ++++++++++++++++++++++++++++++++++++
 1 file changed, 46 insertions(+)
 create mode 100644 .github/workflows/format.yml

diff --git a/.github/workflows/format.yml b/.github/workflows/format.yml
new file mode 100644
index 00000000..f9201192
--- /dev/null
+++ b/.github/workflows/format.yml
@@ -0,0 +1,46 @@
+name: Biome Format
+
+on:
+  push:
+    branches: [ main, master ]
+  pull_request:
+    branches: [ main, master ]
+  workflow_dispatch:
+
+jobs:
+  format:
+    runs-on: ubuntu-latest
+    
+    permissions:
+      # We need to give the default GITHUB_TOKEN write permission to commit and push
+      contents: write
+      
+    steps:
+      - uses: actions/checkout@v4
+        with:
+          ref: ${{ github.head_ref }}
+          
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: '20'
+          
+      - name: Install Biome
+        run: npm install --global @biomejs/biome
+          
+      - name: Format with Biome
+        run: biome format --write .
+        
+      - name: Check for changes
+        id: git-check
+        run: |
+          git diff --exit-code || echo "changes=true" >> $GITHUB_OUTPUT
+          
+      - name: Commit changes
+        if: steps.git-check.outputs.changes == 'true'
+        run: |
+          git config --local user.email "github-actions[bot]@users.noreply.github.com"
+          git config --local user.name "github-actions[bot]"
+          git add -A
+          git commit -m "chore: format code"
+          git push
\ No newline at end of file

From 764328593d7d94d1101b742f08449344b001ca79 Mon Sep 17 00:00:00 2001
From: Dan Ditomaso <dan.ditomaso@gmail.com>
Date: Wed, 19 Feb 2025 11:33:20 -0500
Subject: [PATCH 4/7] changed name of github action

---
 .github/workflows/format.yml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.github/workflows/format.yml b/.github/workflows/format.yml
index f9201192..0e706efe 100644
--- a/.github/workflows/format.yml
+++ b/.github/workflows/format.yml
@@ -1,4 +1,4 @@
-name: Biome Format
+name: Code Formatting
 
 on:
   push:

From 8c693f195683e95a18cb0a2c9366e02d30472545 Mon Sep 17 00:00:00 2001
From: Dan Ditomaso <dan.ditomaso@gmail.com>
Date: Wed, 19 Feb 2025 11:44:36 -0500
Subject: [PATCH 5/7] fix: improve action to fix checkout issue

---
 .github/workflows/format.yml | 26 ++++++++++++++++++--------
 1 file changed, 18 insertions(+), 8 deletions(-)

diff --git a/.github/workflows/format.yml b/.github/workflows/format.yml
index 0e706efe..fcff678e 100644
--- a/.github/workflows/format.yml
+++ b/.github/workflows/format.yml
@@ -5,6 +5,7 @@ on:
     branches: [ main, master ]
   pull_request:
     branches: [ main, master ]
+  # Allow manual triggering
   workflow_dispatch:
 
 jobs:
@@ -12,13 +13,15 @@ jobs:
     runs-on: ubuntu-latest
     
     permissions:
-      # We need to give the default GITHUB_TOKEN write permission to commit and push
+      # Give the default GITHUB_TOKEN write permission to commit and push
       contents: write
       
     steps:
-      - uses: actions/checkout@v4
+      - name: Checkout repository
+        uses: actions/checkout@v4
         with:
-          ref: ${{ github.head_ref }}
+          fetch-depth: 0  
+          token: ${{ github.token }}
           
       - name: Setup Node.js
         uses: actions/setup-node@v4
@@ -34,13 +37,20 @@ jobs:
       - name: Check for changes
         id: git-check
         run: |
-          git diff --exit-code || echo "changes=true" >> $GITHUB_OUTPUT
+          git diff --quiet || echo "changes=true" >> $GITHUB_OUTPUT
           
-      - name: Commit changes
+      - name: Configure Git
         if: steps.git-check.outputs.changes == 'true'
         run: |
-          git config --local user.email "github-actions[bot]@users.noreply.github.com"
-          git config --local user.name "github-actions[bot]"
+          git config --global user.email "github-actions[bot]@users.noreply.github.com"
+          git config --global user.name "github-actions[bot]"
+          
+      - name: Commit and push changes
+        if: steps.git-check.outputs.changes == 'true'
+        run: |
+          branch_name=${GITHUB_HEAD_REF:-${GITHUB_REF#refs/heads/}}
+          echo "Current branch: $branch_name"
           git add -A
+          git status
           git commit -m "chore: format code"
-          git push
\ No newline at end of file
+          git push origin HEAD:$branch_name
\ No newline at end of file

From 84ca90ae9756c056d581bc9de67d192ac05a1a28 Mon Sep 17 00:00:00 2001
From: Dan Ditomaso <dan.ditomaso@gmail.com>
Date: Wed, 19 Feb 2025 11:47:07 -0500
Subject: [PATCH 6/7] fix: further action changes.

---
 .github/workflows/format.yml | 28 ++++++++++------------------
 1 file changed, 10 insertions(+), 18 deletions(-)

diff --git a/.github/workflows/format.yml b/.github/workflows/format.yml
index fcff678e..ec8efd55 100644
--- a/.github/workflows/format.yml
+++ b/.github/workflows/format.yml
@@ -1,11 +1,8 @@
 name: Code Formatting
 
 on:
-  push:
-    branches: [ main, master ]
   pull_request:
     branches: [ main, master ]
-  # Allow manual triggering
   workflow_dispatch:
 
 jobs:
@@ -13,15 +10,16 @@ jobs:
     runs-on: ubuntu-latest
     
     permissions:
-      # Give the default GITHUB_TOKEN write permission to commit and push
       contents: write
+      pull-requests: write
       
     steps:
       - name: Checkout repository
         uses: actions/checkout@v4
         with:
-          fetch-depth: 0  
-          token: ${{ github.token }}
+          ref: ${{ github.head_ref }}
+          fetch-depth: 0
+          token: ${{ secrets.GITHUB_TOKEN }}
           
       - name: Setup Node.js
         uses: actions/setup-node@v4
@@ -39,18 +37,12 @@ jobs:
         run: |
           git diff --quiet || echo "changes=true" >> $GITHUB_OUTPUT
           
-      - name: Configure Git
-        if: steps.git-check.outputs.changes == 'true'
-        run: |
-          git config --global user.email "github-actions[bot]@users.noreply.github.com"
-          git config --global user.name "github-actions[bot]"
-          
       - name: Commit and push changes
         if: steps.git-check.outputs.changes == 'true'
         run: |
-          branch_name=${GITHUB_HEAD_REF:-${GITHUB_REF#refs/heads/}}
-          echo "Current branch: $branch_name"
-          git add -A
-          git status
-          git commit -m "chore: format code"
-          git push origin HEAD:$branch_name
\ No newline at end of file
+           git config --global user.email "github-actions[bot]@users.noreply.github.com"
+           git config --global user.name "github-actions[bot]"
+          
+           git add -A
+           git commit -m "chore: format code"
+           git push
\ No newline at end of file

From a7a9ba04638b74b30c4bbe9c134cfb607e487036 Mon Sep 17 00:00:00 2001
From: Dan Ditomaso <dan.ditomaso@gmail.com>
Date: Wed, 19 Feb 2025 22:29:42 -0500
Subject: [PATCH 7/7] fix: validate bluetooth pin is 6 characters.

---
 src/components/Form/FormSelect.tsx            |   6 +-
 .../PageComponents/Config/Bluetooth.tsx       |  64 +++++++++--
 .../PageComponents/Connect/HTTP.tsx           |   1 -
 src/components/PageLayout.tsx                 |  17 ++-
 src/components/UI/Spinner.tsx                 | 104 ++++++++++++++++++
 src/core/stores/appStore.ts                   |  62 ++++++++++-
 src/index.css                                 |  10 ++
 src/pages/Config/DeviceConfig.tsx             |   2 +-
 src/pages/Config/index.tsx                    |  81 +++++++++-----
 9 files changed, 303 insertions(+), 44 deletions(-)
 create mode 100644 src/components/UI/Spinner.tsx

diff --git a/src/components/Form/FormSelect.tsx b/src/components/Form/FormSelect.tsx
index bd0e24f0..98b4e6b0 100644
--- a/src/components/Form/FormSelect.tsx
+++ b/src/components/Form/FormSelect.tsx
@@ -13,6 +13,7 @@ import { Controller, type FieldValues } from "react-hook-form";
 
 export interface SelectFieldProps<T> extends BaseFormBuilderProps<T> {
   type: "select";
+  selectChange?: (e: string) => void;
   properties: BaseFormBuilderProps<T>["properties"] & {
     enumValue: {
       [s: string]: string | number;
@@ -40,7 +41,10 @@ export function SelectInput<T extends FieldValues>({
           : [];
         return (
           <Select
-            onValueChange={(e) => onChange(Number.parseInt(e))}
+            onValueChange={(e) => {
+              if (field.selectChange) field.selectChange(e);
+              onChange(Number.parseInt(e));
+            }}
             disabled={disabled}
             value={value?.toString()}
             {...remainingProperties}
diff --git a/src/components/PageComponents/Config/Bluetooth.tsx b/src/components/PageComponents/Config/Bluetooth.tsx
index a9a92a69..21bc7c4e 100644
--- a/src/components/PageComponents/Config/Bluetooth.tsx
+++ b/src/components/PageComponents/Config/Bluetooth.tsx
@@ -1,23 +1,57 @@
+import { useAppStore } from "@app/core/stores/appStore";
 import type { BluetoothValidation } from "@app/validation/config/bluetooth.tsx";
 import { DynamicForm } from "@components/Form/DynamicForm.tsx";
 import { useDevice } from "@core/stores/deviceStore.ts";
 import { Protobuf } from "@meshtastic/js";
 import { useState } from "react";
 
-export const Bluetooth = (): JSX.Element => {
+export const Bluetooth = () => {
   const { config, setWorkingConfig } = useDevice();
-  const [bluetoothValidationText, setBluetoothValidationText] =
-    useState<string>();
+  const {
+    hasErrors,
+    getErrorMessage,
+    hasFieldError,
+    addError,
+    removeError,
+    clearErrors,
+  } = useAppStore();
 
-  const bluetoothPinChangeEvent = (e: React.ChangeEvent<HTMLInputElement>) => {
-    if (e.target.value[0] === "0") {
-      setBluetoothValidationText("Bluetooth Pin cannot start with 0.");
-    } else {
-      setBluetoothValidationText("");
+  const [bluetoothPin, setBluetoothPin] = useState(
+    config?.bluetooth?.fixedPin.toString() ?? "",
+  );
+
+  const validateBluetoothPin = (pin: string) => {
+    // if empty show error they need a pin set
+    if (pin === "") {
+      return addError("fixedPin", "Bluetooth Pin is required");
+    }
+
+    // clear any existing errors
+    clearErrors();
+
+    // if it starts with 0 show error
+    if (pin[0] === "0") {
+      return addError("fixedPin", "Bluetooth Pin cannot start with 0");
     }
+    // if it's not 6 digits show error
+    if (pin.length < 6) {
+      return addError("fixedPin", "Pin must be 6 digits");
+    }
+
+    removeError("fixedPin");
+  };
+
+  const bluetoothPinChangeEvent = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const numericValue = e.target.value.replace(/\D/g, "").slice(0, 6);
+    setBluetoothPin(numericValue);
+    validateBluetoothPin(numericValue);
   };
 
   const onSubmit = (data: BluetoothValidation) => {
+    if (hasErrors()) {
+      return;
+    }
+
     setWorkingConfig(
       new Protobuf.Config.Config({
         payloadVariant: {
@@ -48,6 +82,12 @@ export const Bluetooth = (): JSX.Element => {
               name: "mode",
               label: "Pairing mode",
               description: "Pin selection behaviour.",
+              selectChange: (e) => {
+                if (e !== "1") {
+                  setBluetoothPin("");
+                  removeError("fixedPin");
+                }
+              },
               disabledBy: [
                 {
                   fieldName: "enabled",
@@ -63,7 +103,9 @@ export const Bluetooth = (): JSX.Element => {
               name: "fixedPin",
               label: "Pin",
               description: "Pin to use when pairing",
-              validationText: bluetoothValidationText,
+              validationText: hasFieldError("fixedPin")
+                ? getErrorMessage("fixedPin")
+                : "",
               inputChange: bluetoothPinChangeEvent,
               disabledBy: [
                 {
@@ -77,7 +119,9 @@ export const Bluetooth = (): JSX.Element => {
                   fieldName: "enabled",
                 },
               ],
-              properties: {},
+              properties: {
+                value: bluetoothPin,
+              },
             },
           ],
         },
diff --git a/src/components/PageComponents/Connect/HTTP.tsx b/src/components/PageComponents/Connect/HTTP.tsx
index 79a3b6c1..7eb39e95 100644
--- a/src/components/PageComponents/Connect/HTTP.tsx
+++ b/src/components/PageComponents/Connect/HTTP.tsx
@@ -70,7 +70,6 @@ export const HTTP = ({ closeDialog }: TabElementProps): JSX.Element => {
                 onCheckedChange={(checked) => {
                   checked ? setHTTPS(true) : setHTTPS(false);
                 }}
-
                 // label="Use TLS"
                 // description="Description"
                 disabled={
diff --git a/src/components/PageLayout.tsx b/src/components/PageLayout.tsx
index 1009ab54..47dba29f 100644
--- a/src/components/PageLayout.tsx
+++ b/src/components/PageLayout.tsx
@@ -1,6 +1,7 @@
 import { cn } from "@app/core/utils/cn.ts";
 import { AlignLeftIcon, type LucideIcon } from "lucide-react";
 import Footer from "./UI/Footer";
+import { Spinner } from "./UI/Spinner";
 
 export interface PageLayoutProps {
   label: string;
@@ -10,6 +11,8 @@ export interface PageLayoutProps {
     icon: LucideIcon;
     iconClasses?: string;
     onClick: () => void;
+    disabled?: boolean;
+    isLoading?: boolean;
   }[];
 }
 
@@ -18,7 +21,7 @@ export const PageLayout = ({
   noPadding,
   actions,
   children,
-}: PageLayoutProps): JSX.Element => {
+}: PageLayoutProps) => {
   return (
     <>
       <div className="relative flex h-full w-full flex-col">
@@ -33,14 +36,22 @@ export const PageLayout = ({
             <div className="flex w-full items-center">
               <span className="w-full text-lg font-medium">{label}</span>
               <div className="flex justify-end space-x-4">
-                {actions?.map((action, index) => (
+                {actions?.map((action) => (
                   <button
                     key={action.icon.displayName}
                     type="button"
+                    disabled={action?.disabled}
                     className="transition-all hover:text-accent"
                     onClick={action.onClick}
                   >
-                    <action.icon className={action.iconClasses} />
+                    {action?.isLoading ? (
+                      <Spinner />
+                    ) : (
+                      <action.icon
+                        className={action.iconClasses}
+                        aria-disabled={action.disabled}
+                      />
+                    )}
                   </button>
                 ))}
               </div>
diff --git a/src/components/UI/Spinner.tsx b/src/components/UI/Spinner.tsx
new file mode 100644
index 00000000..388482c6
--- /dev/null
+++ b/src/components/UI/Spinner.tsx
@@ -0,0 +1,104 @@
+import { cn } from "@app/core/utils/cn";
+
+interface SpinnerProps extends React.HTMLAttributes<HTMLDivElement> {
+  size?: "sm" | "md" | "lg";
+}
+
+const sizeClasses = {
+  sm: "h-4 w-4",
+  md: "h-8 w-8",
+  lg: "h-12 w-12",
+};
+
+export function Spinner({ className, size = "md", ...props }: SpinnerProps) {
+  return (
+    <div
+      aria-label="Loading..."
+      className={cn(
+        "flex items-center justify-center fade-in-50 fade-out-50",
+        className,
+      )}
+      {...props}
+    >
+      <svg
+        className={cn("animate-spin-slow stroke-current", sizeClasses[size])}
+        role="img"
+        aria-label="Loading spinner"
+        viewBox="0 0 256 256"
+      >
+        <line
+          x1="128"
+          y1="32"
+          x2="128"
+          y2="64"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth="24"
+        />
+        <line
+          x1="195.9"
+          y1="60.1"
+          x2="173.3"
+          y2="82.7"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth="24"
+        />
+        <line
+          x1="224"
+          y1="128"
+          x2="192"
+          y2="128"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth="24"
+        />
+        <line
+          x1="195.9"
+          y1="195.9"
+          x2="173.3"
+          y2="173.3"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth="24"
+        />
+        <line
+          x1="128"
+          y1="224"
+          x2="128"
+          y2="192"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth="24"
+        />
+        <line
+          x1="60.1"
+          y1="195.9"
+          x2="82.7"
+          y2="173.3"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth="24"
+        />
+        <line
+          x1="32"
+          y1="128"
+          x2="64"
+          y2="128"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth="24"
+        />
+        <line
+          x1="60.1"
+          y1="60.1"
+          x2="82.7"
+          y2="82.7"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth="24"
+        />
+      </svg>
+    </div>
+  );
+}
diff --git a/src/core/stores/appStore.ts b/src/core/stores/appStore.ts
index d9e213c8..b0ae4144 100644
--- a/src/core/stores/appStore.ts
+++ b/src/core/stores/appStore.ts
@@ -18,6 +18,11 @@ export type AccentColor =
   | "purple"
   | "pink";
 
+interface ErrorState {
+  field: string;
+  message: string;
+}
+
 interface AppState {
   selectedDevice: number;
   devices: {
@@ -33,11 +38,11 @@ interface AppState {
   nodeNumDetails: number;
   activeChat: number;
   chatType: "broadcast" | "direct";
+  errors: ErrorState[];
 
   setRasterSources: (sources: RasterSource[]) => void;
   addRasterSource: (source: RasterSource) => void;
   removeRasterSource: (index: number) => void;
-
   setSelectedDevice: (deviceId: number) => void;
   addDevice: (device: { id: number; num: number }) => void;
   removeDevice: (deviceId: number) => void;
@@ -49,9 +54,18 @@ interface AppState {
   setNodeNumDetails: (nodeNum: number) => void;
   setActiveChat: (chat: number) => void;
   setChatType: (type: "broadcast" | "direct") => void;
+
+  // Error management
+  hasErrors: () => boolean;
+  getErrorMessage: (field: string) => string | undefined;
+  hasFieldError: (field: string) => boolean;
+  addError: (field: string, message: string) => void;
+  removeError: (field: string) => void;
+  clearErrors: () => void;
+  setNewErrors: (newErrors: ErrorState[]) => void;
 }
 
-export const useAppStore = create<AppState>()((set) => ({
+export const useAppStore = create<AppState>()((set, get) => ({
   selectedDevice: 0,
   devices: [],
   currentPage: "messages",
@@ -67,6 +81,7 @@ export const useAppStore = create<AppState>()((set) => ({
   nodeNumDetails: 0,
   activeChat: Types.ChannelNumber.Primary,
   chatType: "broadcast",
+  errors: [],
 
   setRasterSources: (sources: RasterSource[]) => {
     set(
@@ -146,4 +161,47 @@ export const useAppStore = create<AppState>()((set) => ({
     set(() => ({
       chatType: type,
     })),
+  hasErrors: () => {
+    const state = get();
+    return state.errors.length > 0;
+  },
+  getErrorMessage: (field: string) => {
+    const state = get();
+    return state.errors.find((err) => err.field === field)?.message;
+  },
+  hasFieldError: (field: string) => {
+    const state = get();
+    return state.errors.some((err) => err.field === field);
+  },
+  addError: (field: string, message: string) => {
+    set(
+      produce<AppState>((draft) => {
+        draft.errors = [
+          ...draft.errors.filter((e) => e.field !== field),
+          { field, message },
+        ];
+      }),
+    );
+  },
+  removeError: (field: string) => {
+    set(
+      produce<AppState>((draft) => {
+        draft.errors = draft.errors.filter((e) => e.field !== field);
+      }),
+    );
+  },
+  clearErrors: () => {
+    set(
+      produce<AppState>((draft) => {
+        draft.errors = [];
+      }),
+    );
+  },
+  setNewErrors: (newErrors: ErrorState[]) => {
+    set(
+      produce<AppState>((draft) => {
+        draft.errors = newErrors;
+      }),
+    );
+  },
 }));
diff --git a/src/index.css b/src/index.css
index 6b1f61e2..8e128a44 100644
--- a/src/index.css
+++ b/src/index.css
@@ -99,3 +99,13 @@
 img {
   -webkit-user-drag: none;
 }
+
+@keyframes spin-slower {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.animate-spin-slow {
+  animation: spin-slower 2s linear infinite;
+}
diff --git a/src/pages/Config/DeviceConfig.tsx b/src/pages/Config/DeviceConfig.tsx
index e870b944..0132d5aa 100644
--- a/src/pages/Config/DeviceConfig.tsx
+++ b/src/pages/Config/DeviceConfig.tsx
@@ -14,7 +14,7 @@ import {
 } from "@components/UI/Tabs.tsx";
 import { useDevice } from "@core/stores/deviceStore.ts";
 
-export const DeviceConfig = (): JSX.Element => {
+export const DeviceConfig = () => {
   const { metadata } = useDevice();
 
   const tabs = [
diff --git a/src/pages/Config/index.tsx b/src/pages/Config/index.tsx
index a760f3ba..c4187a40 100644
--- a/src/pages/Config/index.tsx
+++ b/src/pages/Config/index.tsx
@@ -1,3 +1,4 @@
+import { useAppStore } from "@app/core/stores/appStore";
 import { useDevice } from "@app/core/stores/deviceStore.ts";
 import { PageLayout } from "@components/PageLayout.tsx";
 import { Sidebar } from "@components/Sidebar.tsx";
@@ -6,15 +7,62 @@ import { SidebarButton } from "@components/UI/Sidebar/sidebarButton.tsx";
 import { useToast } from "@core/hooks/useToast.ts";
 import { DeviceConfig } from "@pages/Config/DeviceConfig.tsx";
 import { ModuleConfig } from "@pages/Config/ModuleConfig.tsx";
-import { BoxesIcon, SaveIcon, SettingsIcon } from "lucide-react";
+import { BoxesIcon, SaveIcon, SaveOff, SettingsIcon } from "lucide-react";
 import { useState } from "react";
 
-const ConfigPage = (): JSX.Element => {
+const ConfigPage = () => {
   const { workingConfig, workingModuleConfig, connection } = useDevice();
+  const { hasErrors } = useAppStore();
   const [activeConfigSection, setActiveConfigSection] = useState<
     "device" | "module"
   >("device");
+  const [isSaving, setIsSaving] = useState(false);
   const { toast } = useToast();
+  const isError = hasErrors();
+
+  const handleSave = async () => {
+    if (hasErrors()) {
+      return toast({
+        title: "Config Errors Exist",
+        description: "Please fix the configuration errors before saving.",
+      });
+    }
+
+    setIsSaving(true);
+    try {
+      if (activeConfigSection === "device") {
+        await Promise.all(
+          workingConfig.map((config) =>
+            connection?.setConfig(config).then(() =>
+              toast({
+                title: "Saving Config",
+                description: `The configuration change ${config.payloadVariant.case} has been saved.`,
+              }),
+            ),
+          ),
+        );
+      } else {
+        await Promise.all(
+          workingModuleConfig.map((moduleConfig) =>
+            connection?.setModuleConfig(moduleConfig).then(() =>
+              toast({
+                title: "Saving Config",
+                description: `The configuration change ${moduleConfig.payloadVariant.case} has been saved.`,
+              }),
+            ),
+          ),
+        );
+      }
+      await connection?.commitEditSettings();
+    } catch (error) {
+      toast({
+        title: "Error Saving Config",
+        description: "An error occurred while saving the configuration.",
+      });
+    } finally {
+      setIsSaving(false);
+    }
+  };
 
   return (
     <>
@@ -40,30 +88,11 @@ const ConfigPage = (): JSX.Element => {
         }
         actions={[
           {
-            icon: SaveIcon,
-            async onClick() {
-              if (activeConfigSection === "device") {
-                workingConfig.map(
-                  async (config) =>
-                    await connection?.setConfig(config).then(() =>
-                      toast({
-                        title: `Config ${config.payloadVariant.case} saved`,
-                      }),
-                    ),
-                );
-              } else {
-                workingModuleConfig.map(
-                  async (moduleConfig) =>
-                    await connection?.setModuleConfig(moduleConfig).then(() =>
-                      toast({
-                        title: `Config ${moduleConfig.payloadVariant.case} saved`,
-                      }),
-                    ),
-                );
-              }
-
-              await connection?.commitEditSettings();
-            },
+            icon: isError ? SaveOff : SaveIcon,
+            isLoading: isSaving,
+            disabled: isSaving,
+            iconClasses: isError ? "text-red-400 cursor-not-allowed" : "",
+            onClick: handleSave,
           },
         ]}
       >