Overhaul (#83)

* WIP Layout Refactor

* New Connection Dialog

* WIP form overhaul

* Fix remaining config pages

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>
   );
 };