2.0 Overhaul start

src/pages/Config/AppConfig.tsx

@@ -1,15 +1,12 @@
 import type React from "react";
-import { useState } from "react";
-
-import { Pane, Tab, Tablist } from "evergreen-ui";
+import { Fragment } from "react";
 
 import { ExternalNotification } from "@components/PageComponents/ModuleConfig/ExternalNotification.js";
 import { MQTT } from "@components/PageComponents/ModuleConfig/MQTT.js";
 import { Serial } from "@components/PageComponents/ModuleConfig/Serial.js";
+import { Tab } from "@headlessui/react";
 
 export const AppConfig = (): JSX.Element => {
-  const [selectedIndex, setSelectedIndex] = useState(0);
-
   const configSections = [
     {
       label: "Interface",
@@ -26,31 +23,31 @@ export const AppConfig = (): JSX.Element => {
   ];
 
   return (
-    <Pane display="flex">
-      <Pane flexBasis={150} marginRight={24}>
-        <Tablist>
-          {configSections.map((Config, index) => (
-            <Tab
-              key={index}
-              direction="vertical"
-              isSelected={index === selectedIndex}
-              onSelect={() => setSelectedIndex(index)}
-            >
-              {Config.label}
-            </Tab>
-          ))}
-        </Tablist>
-      </Pane>
-      <Pane flex="1">
+    <Tab.Group as="div" className="flex gap-3 w-full">
+      <Tab.List className="flex flex-col w-44 gap-1">
         {configSections.map((Config, index) => (
-          <Pane
-            key={index}
-            display={index === selectedIndex ? "block" : "none"}
-          >
-            <Config.element />
-          </Pane>
+          <Tab key={index} as={Fragment}>
+            {({ selected }) => (
+              <div
+                className={`flex items-center px-3 py-2 text-sm font-medium rounded-md cursor-pointer ${
+                  selected
+                    ? "bg-gray-100 text-gray-900"
+                    : "text-gray-600 hover:bg-gray-50 hover:text-gray-900"
+                }`}
+              >
+                {Config.label}
+              </div>
+            )}
+          </Tab>
         ))}
-      </Pane>
-    </Pane>
+      </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

@@ -1,7 +1,5 @@
 import type React from "react";
-import { useState } from "react";
-
-import { Pane, Tab, Tablist } from "evergreen-ui";
+import { Fragment } from "react";
 
 import { Network } from "@app/components/PageComponents/Config/Network.js";
 import { Bluetooth } from "@components/PageComponents/Config/Bluetooth.js";
@@ -12,9 +10,9 @@ 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";
 
 export const DeviceConfig = (): JSX.Element => {
-  const [selectedIndex, setSelectedIndex] = useState(0);
   const { hardware } = useDevice();
 
   const configSections = [
@@ -54,32 +52,31 @@ export const DeviceConfig = (): JSX.Element => {
   ];
 
   return (
-    <Pane display="flex">
-      <Pane flexBasis={150} marginRight={24}>
-        <Tablist>
-          {configSections.map((Config, index) => (
-            <Tab
-              key={index}
-              direction="vertical"
-              isSelected={index === selectedIndex}
-              onSelect={() => setSelectedIndex(index)}
-              disabled={Config.disabled}
-            >
-              {Config.label}
-            </Tab>
-          ))}
-        </Tablist>
-      </Pane>
-      <Pane flex="1">
+    <Tab.Group as="div" className="flex gap-3 w-full">
+      <Tab.List className="flex flex-col w-44 gap-1">
         {configSections.map((Config, index) => (
-          <Pane
-            key={index}
-            display={index === selectedIndex ? "block" : "none"}
-          >
-            <Config.element />
-          </Pane>
+          <Tab key={index} as={Fragment}>
+            {({ selected }) => (
+              <div
+                className={`flex items-center px-3 py-2 text-sm font-medium rounded-md cursor-pointer ${
+                  selected
+                    ? "bg-gray-100 text-gray-900"
+                    : "text-gray-600 hover:bg-gray-50 hover:text-gray-900"
+                }`}
+              >
+                {Config.label}
+              </div>
+            )}
+          </Tab>
         ))}
-      </Pane>
-    </Pane>
+      </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/ModuleConfig.tsx

@@ -1,7 +1,5 @@
 import type React from "react";
-import { useState } from "react";
-
-import { Pane, Tab, Tablist } from "evergreen-ui";
+import { Fragment, useState } from "react";
 
 import { CannedMessage } from "@components/PageComponents/ModuleConfig/CannedMessage";
 import { ExternalNotification } from "@components/PageComponents/ModuleConfig/ExternalNotification.js";
@@ -10,6 +8,7 @@ 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";
 
 export const ModuleConfig = (): JSX.Element => {
   const [selectedIndex, setSelectedIndex] = useState(0);
@@ -46,31 +45,31 @@ export const ModuleConfig = (): JSX.Element => {
   ];
 
   return (
-    <Pane display="flex">
-      <Pane flexBasis={150} marginRight={24}>
-        <Tablist>
-          {configSections.map((Config, index) => (
-            <Tab
-              key={index}
-              direction="vertical"
-              isSelected={index === selectedIndex}
-              onSelect={() => setSelectedIndex(index)}
-            >
-              {Config.label}
-            </Tab>
-          ))}
-        </Tablist>
-      </Pane>
-      <Pane flex="1">
+    <Tab.Group as="div" className="flex gap-3 w-full">
+      <Tab.List className="flex flex-col gap-1 w-44">
         {configSections.map((Config, index) => (
-          <Pane
-            key={index}
-            display={index === selectedIndex ? "block" : "none"}
-          >
-            <Config.element />
-          </Pane>
+          <Tab key={index} as={Fragment}>
+            {({ selected }) => (
+              <div
+                className={`flex items-center px-3 py-2 text-sm font-medium rounded-md cursor-pointer ${
+                  selected
+                    ? "bg-gray-100 text-gray-900"
+                    : "text-gray-600 hover:bg-gray-50 hover:text-gray-900"
+                }`}
+              >
+                {Config.label}
+              </div>
+            )}
+          </Tab>
         ))}
-      </Pane>
-    </Pane>
+      </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/index.tsx

@@ -1,8 +1,11 @@
 import type React from "react";
 
-import { ApplicationsIcon, CogIcon, CubeIcon } from "evergreen-ui";
-
 import { TabbedContent, TabType } from "@components/layout/page/TabbedContent";
+import {
+  Cog8ToothIcon,
+  CubeTransparentIcon,
+  WindowIcon,
+} from "@heroicons/react/24/outline";
 import { AppConfig } from "@pages/Config/AppConfig.js";
 import { DeviceConfig } from "@pages/Config/DeviceConfig.js";
 import { ModuleConfig } from "@pages/Config/ModuleConfig.js";
@@ -11,17 +14,17 @@ export const ConfigPage = (): JSX.Element => {
   const tabs: TabType[] = [
     {
       name: "Device Config",
-      icon: CogIcon,
+      icon: <Cog8ToothIcon className="h-4" />,
       element: DeviceConfig,
     },
     {
       name: "Module Config",
-      icon: CubeIcon,
+      icon: <CubeTransparentIcon className="h-4" />,
       element: ModuleConfig,
     },
     {
       name: "App Config",
-      icon: ApplicationsIcon,
+      icon: <WindowIcon className="h-4" />,
       element: AppConfig,
     },
   ];