Overhaul (#83)

* WIP Layout Refactor

* New Connection Dialog

* WIP form overhaul

* Fix remaining config pages

src/pages/Config/AppConfig.tsx

@@ -1,41 +0,0 @@
-import { Fragment } from "react";
-import { Map } from "@components/PageComponents/AppConfig/Map.js";
-import { Tab } from "@headlessui/react";
-
-export const AppConfig = (): JSX.Element => {
-  const configSections = [
-    {
-      label: "Map",
-      element: Map
-    }
-  ];
-
-  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>
-  );
-};

src/pages/Config/DeviceConfig.tsx

@@ -6,26 +6,22 @@ import { Display } from "@components/PageComponents/Config/Display.js";
 import { LoRa } from "@components/PageComponents/Config/LoRa.js";
 import { Position } from "@components/PageComponents/Config/Position.js";
 import { Power } from "@components/PageComponents/Config/Power.js";
-import { User } from "@components/PageComponents/Config/User.js";
-import { useDevice } from "@core/providers/useDevice.js";
-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";
+import { useDevice } from "@core/stores/deviceStore.js";
+import {
+  Tabs,
+  TabsContent,
+  TabsList,
+  TabsTrigger
+} from "@components/UI/Tabs.js";
 
 export const DeviceConfig = (): JSX.Element => {
-  const { hardware, workingConfig, connection } = useDevice();
+  const { hardware } = useDevice();
 
   const tabs = [
-    {
-      label: "User",
-      element: User
-    },
     {
       label: "Device",
-      element: Device
+      element: Device,
+      count: 0
     },
     {
       label: "Position",
@@ -55,23 +51,23 @@ export const DeviceConfig = (): JSX.Element => {
   ];
 
   return (
-    <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();
-            }
-          }
-        ]}
-      />
-
-      <VerticalTabbedContent tabs={tabs} />
-    </div>
+    <Tabs defaultValue="Device">
+      <TabsList>
+        {tabs.map((tab) => (
+          <TabsTrigger
+            key={tab.label}
+            value={tab.label}
+            disabled={tab.disabled}
+          >
+            {tab.label}
+          </TabsTrigger>
+        ))}
+      </TabsList>
+      {tabs.map((tab) => (
+        <TabsContent key={tab.label} value={tab.label}>
+          <tab.element />
+        </TabsContent>
+      ))}
+    </Tabs>
   );
 };

src/pages/Config/ModuleConfig.tsx

@@ -7,9 +7,13 @@ 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 { useDevice } from "@app/core/providers/useDevice.js";
-import { NavBar } from "@app/Nav/NavBar.js";
-import { VerticalTabbedContent } from "@app/components/generic/VerticalTabbedContent.js";
+import { useDevice } from "@app/core/stores/deviceStore.js";
+import {
+  Tabs,
+  TabsContent,
+  TabsList,
+  TabsTrigger
+} from "@components/UI/Tabs.js";
 
 export const ModuleConfig = (): JSX.Element => {
   const { workingModuleConfig, connection } = useDevice();
@@ -24,11 +28,11 @@ export const ModuleConfig = (): JSX.Element => {
       element: Serial
     },
     {
-      label: "External Notification",
+      label: "Ext Notif",
       element: ExternalNotification
     },
     {
-      label: "Store & Forward",
+      label: "S&F",
       element: StoreForward
     },
     {
@@ -40,33 +44,29 @@ export const ModuleConfig = (): JSX.Element => {
       element: Telemetry
     },
     {
-      label: "Canned Message",
+      label: "Canned",
       element: CannedMessage
     },
     {
-      label: "Audio Config",
+      label: "Audio",
       element: Audio
     }
   ];
 
   return (
-    <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>
+    <Tabs defaultValue="MQTT">
+      <TabsList>
+        {tabs.map((tab) => (
+          <TabsTrigger key={tab.label} value={tab.label}>
+            {tab.label}
+          </TabsTrigger>
+        ))}
+      </TabsList>
+      {tabs.map((tab) => (
+        <TabsContent key={tab.label} value={tab.label}>
+          <tab.element />
+        </TabsContent>
+      ))}
+    </Tabs>
   );
 };

src/pages/Config/index.tsx

@@ -1,34 +1,69 @@
-import { TabbedContent, TabType } from "@components/generic/TabbedContent";
-import { useDevice } from "@core/providers/useDevice.js";
-import {
-  Cog8ToothIcon,
-  CubeTransparentIcon,
-  WindowIcon
-} from "@heroicons/react/24/outline";
-import { AppConfig } from "@pages/Config/AppConfig.js";
+import { Sidebar } from "@app/components/Sidebar.js";
+import { SettingsIcon, BoxesIcon, SaveIcon } from "lucide-react";
 import { DeviceConfig } from "@pages/Config/DeviceConfig.js";
 import { ModuleConfig } from "@pages/Config/ModuleConfig.js";
+import { PageLayout } from "@app/components/Topbar.js";
+import { SidebarSection } from "@app/components/UI/Sidebar/SidebarSection.js";
+import { useState } from "react";
+import { useDevice } from "@app/core/stores/deviceStore.js";
+import { Button } from "@app/components/UI/Button.js";
+import { SidebarButton } from "@app/components/UI/Sidebar/sidebarButton.js";
 
 export const ConfigPage = (): JSX.Element => {
-  const { connection, pendingSettingsChanges } = useDevice();
+  const { workingConfig, workingModuleConfig, connection } = useDevice();
+  const [activeConfigSection, setActiveConfigSection] = useState<
+    "device" | "module"
+  >("device");
 
-  const tabs: TabType[] = [
-    {
-      label: "Device Config",
-      icon: <Cog8ToothIcon className="h-4" />,
-      element: DeviceConfig
-    },
-    {
-      label: "Module Config",
-      icon: <CubeTransparentIcon className="h-4" />,
-      element: ModuleConfig
-    },
-    {
-      label: "App Config",
-      icon: <WindowIcon className="h-4" />,
-      element: AppConfig
-    }
-  ];
+  return (
+    <>
+      <Sidebar>
+        <SidebarSection label="Config Sections">
+          <SidebarButton
+            label="Device Config"
+            active={activeConfigSection === "device"}
+            onClick={() => setActiveConfigSection("device")}
+            icon={SettingsIcon}
+          />
+          <SidebarButton
+            label="Module Config"
+            active={activeConfigSection === "module"}
+            onClick={() => setActiveConfigSection("module")}
+            icon={BoxesIcon}
+          />
+        </SidebarSection>
+      </Sidebar>
+      <PageLayout
+        label={
+          activeConfigSection === "device" ? "Device Config" : "Module Config"
+        }
+        actions={[
+          {
+            icon: SaveIcon,
+            async onClick() {
+              if (activeConfigSection === "device") {
+                workingConfig.map(
+                  async (config) => await connection?.setConfig(config)
+                );
+              } else {
+                workingModuleConfig.map(
+                  async (config) => await connection?.setModuleConfig(config)
+                );
+              }
 
-  return <TabbedContent tabs={tabs} />;
+              await connection?.commitEditSettings();
+            }
+          }
+        ]}
+      >
+        <div className="p-3">
+          {activeConfigSection === "device" ? (
+            <DeviceConfig />
+          ) : (
+            <ModuleConfig />
+          )}
+        </div>
+      </PageLayout>
+    </>
+  );
 };