Cleanup & start transition of moduleConfig

src/pages/Channels.tsx

@@ -12,7 +12,7 @@ export const ChannelsPage = (): JSX.Element => {
 
   const tabs: TabType[] = channels.map((channel) => {
     return {
-      name: channel.config.settings?.name.length
+      label: channel.config.settings?.name.length
         ? channel.config.settings.name
         : channel.config.role === Protobuf.Channel_Role.PRIMARY
         ? "Primary"

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
     }

src/pages/Extensions/Environment.tsx

@@ -1,13 +0,0 @@
-import { useDevice } from "@core/providers/useDevice.js";
-
-export const Environment = (): JSX.Element => {
-  const { nodes } = useDevice();
-
-  return (
-    <div>
-      {nodes.map((node, index) => (
-        <div key={index}>{JSON.stringify(node.environmentMetrics)}</div>
-      ))}
-    </div>
-  );
-};

src/pages/Extensions/FileBrowser.tsx

@@ -1,47 +0,0 @@
-import { useEffect, useState } from "react";
-
-export interface File {
-  nameModified: string;
-  name: string;
-  size: number;
-}
-
-export interface Files {
-  data: {
-    files: File[];
-    fileSystem: {
-      total: number;
-      used: number;
-      free: number;
-    };
-  };
-  status: string;
-}
-
-export const FileBrowser = (): JSX.Element => {
-  const [data, setData] = useState<Files>();
-
-  useEffect(() => {
-    void fetch("http://meshtastic.local/json/fs/browse/static").then(
-      async (res) => {
-        setData((await res.json()) as Files);
-      }
-    );
-  }, []);
-
-  return (
-    <div>
-      {data?.data.files.map((file) => (
-        <div key={file.name}>
-          <a
-            target="_blank"
-            rel="noopener noreferrer"
-            href={`http://meshtastic.local/${file.name.replace("static/", "")}`}
-          >
-            {file.name.replace("static/", "").replace(".gz", "")}
-          </a>
-        </div>
-      ))}
-    </div>
-  );
-};

src/pages/Extensions/Index.tsx

@@ -1,35 +0,0 @@
-import { TabbedContent, TabType } from "@components/generic/TabbedContent";
-import { useDevice } from "@core/providers/useDevice.js";
-import {
-  CloudIcon,
-  DocumentIcon,
-  SignalIcon
-} from "@heroicons/react/24/outline";
-import { Environment } from "@pages/Extensions/Environment.js";
-import { FileBrowser } from "@pages/Extensions/FileBrowser";
-
-export const ExtensionsPage = (): JSX.Element => {
-  const { hardware } = useDevice();
-
-  const tabs: TabType[] = [
-    {
-      name: "File Browser",
-      icon: <DocumentIcon className="h-4" />,
-      element: FileBrowser,
-      disabled: !hardware.hasWifi
-    },
-    {
-      name: "Range Test",
-      icon: <SignalIcon className="h-4" />,
-      element: FileBrowser,
-      disabled: !hardware.hasWifi
-    },
-    {
-      name: "Environment",
-      icon: <CloudIcon className="h-4" />,
-      element: Environment
-    }
-  ];
-
-  return <TabbedContent tabs={tabs} />;
-};

src/pages/Messages.tsx

@@ -9,7 +9,7 @@ export const MessagesPage = (): JSX.Element => {
 
   const tabs: TabType[] = channels.map((channel) => {
     return {
-      name: channel.config.settings?.name.length
+      label: channel.config.settings?.name.length
         ? channel.config.settings?.name
         : channel.config.index === 0
         ? "Primary"