Cleanup & start transition of moduleConfig

src/pages/Config/DeviceConfig.tsx

@@ -12,11 +12,13 @@ import { Tab } from "@headlessui/react";
 import { ChevronRightIcon, HomeIcon } from "@heroicons/react/24/outline";
 import { Button } from "@components/form/Button.js";
 import { CheckIcon } from "@primer/octicons-react";
+import { NavBar } from "@app/Nav/NavBar.js";
+import { VerticalTabbedContent } from "@app/components/generic/VerticalTabbedContent.js";
 
 export const DeviceConfig = (): JSX.Element => {
   const { hardware, workingConfig, connection } = useDevice();
 
-  const configSections = [
+  const tabs = [
     {
       label: "User",
       element: User
@@ -53,65 +55,23 @@ export const DeviceConfig = (): JSX.Element => {
   ];
 
   return (
-    <div className="w-full">
-      <div className="m-2 flex rounded-md bg-backgroundSecondary p-2">
-        <ol className="my-auto ml-2 flex gap-4 text-textSecondary">
-          <li className="cursor-pointer hover:brightness-disabled">
-            <HomeIcon className="h-5 w-5 flex-shrink-0" />
-          </li>
-          {["Config", "User"].map((breadcrumb, index) => (
-            <li key={index} className="flex gap-4">
-              <ChevronRightIcon className="h-5 w-5 flex-shrink-0 brightness-disabled" />
-              <span className="cursor-pointer text-sm font-medium hover:brightness-disabled">
-                {breadcrumb}
-              </span>
-            </li>
-          ))}
-        </ol>
-        <div className="ml-auto">
-          <Button
-            onClick={async () => {
+    <div className="flex flex-grow flex-col gap-2">
+      <NavBar
+        breadcrumb={["Config"]}
+        actions={[
+          {
+            label: "Apply & Reboot",
+            async onClick() {
               workingConfig.map(async (config) => {
                 await connection?.setConfig(config);
               });
               await connection?.commitEditSettings();
-            }}
-            iconBefore={<CheckIcon className="w-4" />}
-          >
-            Apply & Reboot
-          </Button>
-        </div>
-      </div>
+            }
+          }
+        ]}
+      />
 
-      <Tab.Group as="div" className="flex w-full gap-3">
-        <Tab.List className="flex w-44 flex-col">
-          {configSections.map((Config, index) => (
-            <Tab key={index} as={Fragment}>
-              {({ selected }) => (
-                <div
-                  className={`flex cursor-pointer items-center border-l-4 p-4 text-sm font-medium ${
-                    selected
-                      ? "border-accent bg-accentMuted bg-opacity-10 text-textPrimary"
-                      : "border-backgroundPrimary text-textSecondary"
-                  }`}
-                >
-                  {Config.label}
-                  <span className="ml-auto rounded-full bg-accent px-3 text-textPrimary">
-                    3
-                  </span>
-                </div>
-              )}
-            </Tab>
-          ))}
-        </Tab.List>
-        <Tab.Panels as={Fragment}>
-          {configSections.map((Config, index) => (
-            <Tab.Panel key={index} as={Fragment}>
-              <Config.element />
-            </Tab.Panel>
-          ))}
-        </Tab.Panels>
-      </Tab.Group>
+      <VerticalTabbedContent tabs={tabs} />
     </div>
   );
 };

src/pages/Config/ModuleConfig.tsx

@@ -7,10 +7,14 @@ import { RangeTest } from "@components/PageComponents/ModuleConfig/RangeTest.js"
 import { Serial } from "@components/PageComponents/ModuleConfig/Serial.js";
 import { StoreForward } from "@components/PageComponents/ModuleConfig/StoreForward.js";
 import { Telemetry } from "@components/PageComponents/ModuleConfig/Telemetry.js";
-import { Tab } from "@headlessui/react";
+import { useDevice } from "@app/core/providers/useDevice.js";
+import { NavBar } from "@app/Nav/NavBar.js";
+import { VerticalTabbedContent } from "@app/components/generic/VerticalTabbedContent.js";
 
 export const ModuleConfig = (): JSX.Element => {
-  const configSections = [
+  const { workingModuleConfig, connection } = useDevice();
+
+  const tabs = [
     {
       label: "MQTT",
       element: MQTT
@@ -46,31 +50,23 @@ export const ModuleConfig = (): JSX.Element => {
   ];
 
   return (
-    <Tab.Group as="div" className="flex w-full gap-3">
-      <Tab.List className="flex w-44 flex-col gap-1">
-        {configSections.map((Config, index) => (
-          <Tab key={index} as={Fragment}>
-            {({ selected }) => (
-              <div
-                className={`flex cursor-pointer items-center rounded-md px-3 py-2 text-sm font-medium ${
-                  selected
-                    ? "bg-gray-100 text-gray-900"
-                    : "text-gray-600 hover:bg-gray-50 hover:text-gray-900"
-                }`}
-              >
-                {Config.label}
-              </div>
-            )}
-          </Tab>
-        ))}
-      </Tab.List>
-      <Tab.Panels as={Fragment}>
-        {configSections.map((Config, index) => (
-          <Tab.Panel key={index} as={Fragment}>
-            <Config.element />
-          </Tab.Panel>
-        ))}
-      </Tab.Panels>
-    </Tab.Group>
+    <div className="flex flex-grow flex-col gap-2">
+      <NavBar
+        breadcrumb={["Module Config"]}
+        actions={[
+          {
+            label: "Apply & Reboot",
+            async onClick() {
+              workingModuleConfig.map(async (moduleConfig) => {
+                await connection?.setModuleConfig(moduleConfig);
+              });
+              await connection?.commitEditSettings();
+            }
+          }
+        ]}
+      />
+
+      <VerticalTabbedContent tabs={tabs} />
+    </div>
   );
 };

src/pages/Config/index.tsx

@@ -14,17 +14,17 @@ export const ConfigPage = (): JSX.Element => {
 
   const tabs: TabType[] = [
     {
-      name: "Device Config",
+      label: "Device Config",
       icon: <Cog8ToothIcon className="h-4" />,
       element: DeviceConfig
     },
     {
-      name: "Module Config",
+      label: "Module Config",
       icon: <CubeTransparentIcon className="h-4" />,
       element: ModuleConfig
     },
     {
-      name: "App Config",
+      label: "App Config",
       icon: <WindowIcon className="h-4" />,
       element: AppConfig
     }