Overhaul (#83)

* WIP Layout Refactor

* New Connection Dialog

* WIP form overhaul

* Fix remaining config pages

src/components/CommandPalette.tsx

@@ -1,52 +1,49 @@
-import { ComponentType, Fragment, SVGProps, useEffect, useState } from "react";
-import { toast } from "react-hot-toast";
-import { useDevice } from "@core/providers/useDevice.js";
+import { useEffect } from "react";
 import { useAppStore } from "@core/stores/appStore.js";
-import { useDeviceStore } from "@core/stores/deviceStore.js";
-import { GroupView } from "@components/CommandPalette/GroupView.js";
-import { NoResults } from "@components/CommandPalette/NoResults.js";
-import { PaletteTransition } from "@components/CommandPalette/PaletteTransition.js";
-import { SearchBox } from "@components/CommandPalette/SearchBox.js";
-import { SearchResult } from "@components/CommandPalette/SearchResult.js";
+import { useDevice, useDeviceStore } from "@core/stores/deviceStore.js";
+import { useCommandState } from "cmdk";
 import { Hashicon } from "@emeraldpay/hashicon-react";
-import { Combobox, Dialog, Transition } from "@headlessui/react";
 import {
-  ArchiveBoxXMarkIcon,
-  ArrowDownOnSquareStackIcon,
-  ArrowPathIcon,
-  ArrowPathRoundedSquareIcon,
-  ArrowsRightLeftIcon,
-  BeakerIcon,
-  BugAntIcon,
-  Cog8ToothIcon,
-  CubeTransparentIcon,
-  DevicePhoneMobileIcon,
-  InboxIcon,
+  LucideIcon,
   LinkIcon,
+  TrashIcon,
   MapIcon,
   MoonIcon,
   PlusIcon,
   PowerIcon,
+  EraserIcon,
+  RefreshCwIcon,
+  FactoryIcon,
+  ArrowLeftRightIcon,
+  BugIcon,
+  SettingsIcon,
+  SmartphoneIcon,
+  MessageSquareIcon,
   QrCodeIcon,
-  QueueListIcon,
-  Square3Stack3DIcon,
-  SwatchIcon,
-  TrashIcon,
+  LayersIcon,
+  PaletteIcon,
   UsersIcon,
-  WindowIcon,
-  XCircleIcon
-} from "@heroicons/react/24/outline";
-import { Blur } from "@components/generic/Blur.js";
-import { ThemeController } from "@components/generic/ThemeController.js";
+  LayoutIcon,
+  XCircleIcon,
+  BoxSelectIcon
+} from "lucide-react";
+import {
+  CommandDialog,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList
+} from "@components/UI/Command.js";
 
 export interface Group {
   label: string;
-  icon: ComponentType<SVGProps<SVGSVGElement>>;
+  icon: LucideIcon;
   commands: Command[];
 }
 export interface Command {
   label: string;
-  icon: ComponentType<SVGProps<SVGSVGElement>>;
+  icon: LucideIcon;
   action?: () => void;
   subItems?: SubItem[];
   tags?: string[];
@@ -59,11 +56,9 @@ export interface SubItem {
 }
 
 export const CommandPalette = (): JSX.Element => {
-  const [query, setQuery] = useState("");
   const {
     commandPaletteOpen,
     setCommandPaletteOpen,
-    devices,
     setSelectedDevice,
     removeDevice,
     selectedDevice,
@@ -72,7 +67,6 @@ export const CommandPalette = (): JSX.Element => {
     setAccent
   } = useAppStore();
   const { getDevices } = useDeviceStore();
-
   const { setDialogOpen, setActivePage, connection } = useDevice();
 
   const groups: Group[] = [
@@ -82,7 +76,7 @@ export const CommandPalette = (): JSX.Element => {
       commands: [
         {
           label: "Messages",
-          icon: InboxIcon,
+          icon: MessageSquareIcon,
           action() {
             setActivePage("messages");
           }
@@ -96,7 +90,7 @@ export const CommandPalette = (): JSX.Element => {
         },
         {
           label: "Config",
-          icon: Cog8ToothIcon,
+          icon: SettingsIcon,
           action() {
             setActivePage("config");
           },
@@ -104,7 +98,7 @@ export const CommandPalette = (): JSX.Element => {
         },
         {
           label: "Channels",
-          icon: Square3Stack3DIcon,
+          icon: LayersIcon,
           action() {
             setActivePage("channels");
           }
@@ -120,11 +114,11 @@ export const CommandPalette = (): JSX.Element => {
     },
     {
       label: "Manage",
-      icon: DevicePhoneMobileIcon,
+      icon: SmartphoneIcon,
       commands: [
         {
           label: "Switch Node",
-          icon: ArrowsRightLeftIcon,
+          icon: ArrowLeftRightIcon,
           subItems: getDevices().map((device) => {
             return {
               label:
@@ -133,7 +127,7 @@ export const CommandPalette = (): JSX.Element => {
                 )?.data.user?.longName ?? device.hardware.myNodeNum.toString(),
               icon: (
                 <Hashicon
-                  size={18}
+                  size={16}
                   value={device.hardware.myNodeNum.toString()}
                 />
               ),
@@ -154,7 +148,7 @@ export const CommandPalette = (): JSX.Element => {
     },
     {
       label: "Contextual",
-      icon: CubeTransparentIcon,
+      icon: BoxSelectIcon,
       commands: [
         {
           label: "QR Code",
@@ -162,14 +156,14 @@ export const CommandPalette = (): JSX.Element => {
           subItems: [
             {
               label: "Generator",
-              icon: <QueueListIcon className="w-4" />,
+              icon: <QrCodeIcon size={16} />,
               action() {
                 setDialogOpen("QR", true);
               }
             },
             {
               label: "Import",
-              icon: <ArrowDownOnSquareStackIcon className="w-4" />,
+              icon: <QrCodeIcon size={16} />,
               action() {
                 setDialogOpen("import", true);
               }
@@ -194,7 +188,7 @@ export const CommandPalette = (): JSX.Element => {
         },
         {
           label: "Schedule Reboot",
-          icon: ArrowPathIcon,
+          icon: RefreshCwIcon,
           action() {
             setDialogOpen("reboot", true);
           }
@@ -203,44 +197,32 @@ export const CommandPalette = (): JSX.Element => {
           label: "Reset Peers",
           icon: TrashIcon,
           action() {
-            if (connection) {
-              void toast.promise(connection.resetPeers(), {
-                loading: "Resetting...",
-                success: "Succesfully reset peers",
-                error: "No response received"
-              });
-            }
+            connection?.resetPeers();
           }
         },
         {
           label: "Factory Reset",
-          icon: ArrowPathRoundedSquareIcon,
+          icon: FactoryIcon,
           action() {
-            if (connection) {
-              void toast.promise(connection.factoryReset(), {
-                loading: "Resetting...",
-                success: "Succesfully factory peers",
-                error: "No response received"
-              });
-            }
+            connection?.factoryReset();
           }
         }
       ]
     },
     {
       label: "Debug",
-      icon: BugAntIcon,
+      icon: BugIcon,
       commands: [
         {
           label: "Reconfigure",
-          icon: ArrowPathIcon,
+          icon: RefreshCwIcon,
           action() {
             void connection?.configure();
           }
         },
         {
           label: "[WIP] Clear Messages",
-          icon: ArchiveBoxXMarkIcon,
+          icon: EraserIcon,
           action() {
             alert("This feature is not implemented");
           }
@@ -249,7 +231,7 @@ export const CommandPalette = (): JSX.Element => {
     },
     {
       label: "Application",
-      icon: WindowIcon,
+      icon: LayoutIcon,
       commands: [
         {
           label: "Toggle Dark Mode",
@@ -260,7 +242,7 @@ export const CommandPalette = (): JSX.Element => {
         },
         {
           label: "Accent Color",
-          icon: SwatchIcon,
+          icon: PaletteIcon,
           subItems: [
             {
               label: "Red",
@@ -359,102 +341,72 @@ export const CommandPalette = (): JSX.Element => {
     }
   ];
 
-  const handleKeydown = (e: KeyboardEvent) => {
-    if (e.key === "k" && (e.metaKey || e.ctrlKey)) {
-      e.preventDefault();
-      setCommandPaletteOpen(true);
-    }
-  };
-
   useEffect(() => {
+    const handleKeydown = (e: KeyboardEvent) => {
+      if (e.key === "k" && (e.metaKey || e.ctrlKey)) {
+        e.preventDefault();
+        setCommandPaletteOpen(true);
+      }
+    };
+
     window.addEventListener("keydown", handleKeydown);
     return () => window.removeEventListener("keydown", handleKeydown);
   }, []);
 
-  const filtered =
-    query === ""
-      ? []
-      : groups
-          .map((group) => {
-            return {
-              ...group,
-              commands: group.commands.filter((command) => {
-                const nameIncludes = `${group.label} ${command.label}`
-                  .toLowerCase()
-                  .includes(query.toLowerCase());
-
-                const tagsInclude = (
-                  command.tags
-                    ?.map((t) => t.includes(query.toLowerCase()))
-                    .filter(Boolean) ?? []
-                ).length;
-
-                const subItemsInclude = (
-                  command.subItems
-                    ?.map((s) =>
-                      s.label.toLowerCase().includes(query.toLowerCase())
-                    )
-                    .filter(Boolean) ?? []
-                ).length;
-                return nameIncludes || tagsInclude || subItemsInclude;
-              })
-            };
-          })
-          .filter((group) => group.commands.length);
-
   return (
-    <Transition.Root
-      show={commandPaletteOpen}
-      as={Fragment}
-      afterLeave={() => setQuery("")}
-      appear
+    <CommandDialog
+      open={commandPaletteOpen}
+      onOpenChange={setCommandPaletteOpen}
     >
-      <Dialog
-        as="div"
-        className="relative z-10"
-        onClose={setCommandPaletteOpen}
-      >
-        <ThemeController>
-          <Blur />
-          <PaletteTransition>
-            <Dialog.Panel className="mx-auto max-w-2xl transform overflow-hidden rounded-md bg-backgroundPrimary transition-all">
-              <Combobox<Command | string>
-                onChange={(input) => {
-                  if (typeof input === "string") {
-                    setQuery(input);
-                  } else if (input.action) {
+      <CommandInput placeholder="Type a command or search..." />
+      <CommandList>
+        <CommandEmpty>No results found.</CommandEmpty>
+        {groups.map((group) => (
+          <CommandGroup heading={group.label}>
+            {group.commands.map((command) => (
+              <>
+                <CommandItem
+                  onSelect={() => {
+                    command.action && command.action();
                     setCommandPaletteOpen(false);
-                    input.action();
-                  }
-                }}
-              >
-                <SearchBox setQuery={setQuery} />
+                  }}
+                >
+                  <command.icon size={16} className="mr-2" />
+                  {command.label}
+                </CommandItem>
+                {command.subItems &&
+                  command.subItems.map((subItem) => (
+                    <SubItem
+                      label={subItem.label}
+                      icon={subItem.icon}
+                      action={subItem.action}
+                    />
+                  ))}
+              </>
+            ))}
+          </CommandGroup>
+        ))}
+      </CommandList>
+    </CommandDialog>
+  );
+};
 
-                {query === "" || filtered.length > 0 ? (
-                  <Combobox.Options
-                    static
-                    className="max-h-80 scroll-py-2 divide-y divide-opacity-10 overflow-y-auto bg-backgroundSecondary"
-                  >
-                    <li className="p-2">
-                      <ul className="flex flex-col gap-2 text-sm text-textSecondary">
-                        {filtered.map((group, index) => (
-                          <SearchResult key={index} group={group} />
-                        ))}
-                        {query === "" &&
-                          groups.map((group, index) => (
-                            <GroupView key={index} group={group} />
-                          ))}
-                      </ul>
-                    </li>
-                  </Combobox.Options>
-                ) : (
-                  query !== "" && filtered.length === 0 && <NoResults />
-                )}
-              </Combobox>
-            </Dialog.Panel>
-          </PaletteTransition>
-        </ThemeController>
-      </Dialog>
-    </Transition.Root>
+const SubItem = ({
+  label,
+  icon,
+  action
+}: {
+  label: string;
+  icon: React.ReactNode;
+  action: () => void;
+}) => {
+  const search = useCommandState((state) => state.search);
+  if (!search) return null;
+
+  return (
+    <CommandItem onSelect={action}>
+      {icon}
+      {label}
+    </CommandItem>
   );
 };

src/components/CommandPalette/GroupView.tsx

@@ -1,28 +0,0 @@
-import type { Group } from "@components/CommandPalette/Index.js";
-import { Combobox } from "@headlessui/react";
-import { ChevronRightIcon } from "@heroicons/react/24/outline";
-
-export interface GroupViewProps {
-  group: Group;
-}
-
-export const GroupView = ({ group }: GroupViewProps): JSX.Element => {
-  return (
-    <Combobox.Option
-      value={group.label}
-      className={({ active }) =>
-        `flex cursor-default select-none items-center rounded-md px-3 py-2 ${
-          active ? "bg-backgroundPrimary text-textPrimary" : ""
-        }`
-      }
-    >
-      {({ active }) => (
-        <>
-          <group.icon className="h-6 w-6" />
-          <span className="ml-3 flex-auto truncate">{group.label}</span>
-          {active && <ChevronRightIcon className="h-5 text-textSecondary" />}
-        </>
-      )}
-    </Combobox.Option>
-  );
-};

src/components/CommandPalette/NoResults.tsx

@@ -1,13 +0,0 @@
-import { Mono } from "@components/generic/Mono.js";
-import { CommandLineIcon } from "@heroicons/react/24/outline";
-
-export const NoResults = (): JSX.Element => {
-  return (
-    <div className="py-14 px-14 text-center">
-      <CommandLineIcon className="mx-auto h-6 text-textSecondary" />
-      <Mono className="tracking-tighter">
-        Query does not match any avaliable commands
-      </Mono>
-    </div>
-  );
-};

src/components/CommandPalette/PaletteTransition.tsx

@@ -1,40 +0,0 @@
-import { Fragment, ReactNode } from "react";
-import { Transition } from "@headlessui/react";
-
-export interface PaletteTransitionProps {
-  children: ReactNode;
-}
-
-export const PaletteTransition = ({
-  children
-}: PaletteTransitionProps): JSX.Element => {
-  return (
-    <>
-      <Transition.Child
-        as={Fragment}
-        enter="ease-out duration-200"
-        enterFrom="opacity-0"
-        enterTo="opacity-100"
-        leave="ease-in duration-100"
-        leaveFrom="opacity-100"
-        leaveTo="opacity-0"
-      >
-        <div className="bg-gray-500 fixed inset-0 bg-opacity-25 transition-opacity" />
-      </Transition.Child>
-
-      <div className="fixed inset-0 z-10 overflow-y-auto p-4 sm:p-6 md:p-20">
-        <Transition.Child
-          as={Fragment}
-          enter="ease-out duration-200"
-          enterFrom="opacity-0 scale-95"
-          enterTo="opacity-100 scale-100"
-          leave="ease-in duration-100"
-          leaveFrom="opacity-100 scale-100"
-          leaveTo="opacity-0 scale-95"
-        >
-          {children}
-        </Transition.Child>
-      </div>
-    </>
-  );
-};

src/components/CommandPalette/SearchBox.tsx

@@ -1,19 +0,0 @@
-import { Combobox } from "@headlessui/react";
-import { MagnifyingGlassIcon } from "@heroicons/react/24/outline";
-
-export interface SearchBoxProps {
-  setQuery: (query: string) => void;
-}
-
-export const SearchBox = ({ setQuery }: SearchBoxProps): JSX.Element => {
-  return (
-    <div className="relative">
-      <MagnifyingGlassIcon className="pointer-events-none absolute top-3.5 left-4 h-5 w-5 text-textSecondary" />
-      <Combobox.Input
-        className="h-12 w-full border-0 bg-transparent pl-11 pr-4 text-sm text-textPrimary placeholder-textSecondary focus:ring-0"
-        placeholder="Search..."
-        onChange={(event) => setQuery(event.target.value)}
-      />
-    </div>
-  );
-};

src/components/CommandPalette/SearchResult.tsx

@@ -1,71 +0,0 @@
-import type { Group } from "@components/CommandPalette/Index.js";
-import { Combobox } from "@headlessui/react";
-import { ChevronRightIcon } from "@heroicons/react/24/outline";
-
-export interface SearchResultProps {
-  group: Group;
-}
-
-export const SearchResult = ({ group }: SearchResultProps): JSX.Element => {
-  return (
-    <div className="rounded-md border-2 border-backgroundPrimary py-2">
-      <div className="flex items-center px-3 py-2">
-        <group.icon className="text-gray-900 h-6 w-6 flex-none text-opacity-40" />
-        <span className="ml-3 flex-auto truncate">{group.label}</span>
-      </div>
-      {group.commands.map((command, index) => (
-        <div key={index}>
-          <Combobox.Option
-            value={command}
-            className={({ active }) =>
-              `mr-2 ml-4 flex cursor-pointer select-none items-center rounded-md px-3 py-1 ${
-                active ? "text-gray-900 bg-backgroundPrimary" : ""
-              }`
-            }
-          >
-            {({ active }) => (
-              <>
-                <command.icon
-                  className={`text-gray-900 h-4 flex-none text-opacity-40 ${
-                    active ? "text-opacity-100" : ""
-                  }`}
-                />
-                <span className="ml-3">{command.label}</span>
-                {active && (
-                  <ChevronRightIcon className="text-gray-400 ml-auto h-4" />
-                )}
-              </>
-            )}
-          </Combobox.Option>
-          {command.subItems && (
-            <div className=" ml-9 border-l">
-              {command.subItems?.map((item, index) => (
-                <Combobox.Option
-                  key={index}
-                  value={item}
-                  className={({ active }) =>
-                    `mx-2 flex cursor-pointer select-none items-center rounded-md px-3 py-1 ${
-                      active
-                        ? "text-gray-900 bg-backgroundPrimary bg-opacity-5"
-                        : ""
-                    }`
-                  }
-                >
-                  {({ active }) => (
-                    <>
-                      {item.icon}
-                      <span className="ml-3">{item.label}</span>
-                      {active && (
-                        <ChevronRightIcon className="text-gray-400 ml-auto h-4" />
-                      )}
-                    </>
-                  )}
-                </Combobox.Option>
-              ))}
-            </div>
-          )}
-        </div>
-      ))}
-    </div>
-  );
-};

src/components/Dashboard.tsx

@@ -0,0 +1,104 @@
+import { useAppStore } from "@app/core/stores/appStore.js";
+import { Button } from "@components/UI/Button.js";
+import {
+  PlusIcon,
+  ListPlusIcon,
+  UsersIcon,
+  MapPinIcon,
+  CalendarIcon,
+  BluetoothIcon,
+  UsbIcon,
+  NetworkIcon
+} from "lucide-react";
+import { Subtle } from "./UI/Typography/Subtle.js";
+import { H3 } from "./UI/Typography/H3.js";
+import { useDeviceStore } from "@app/core/stores/deviceStore.js";
+import { useMemo } from "react";
+import { Separator } from "./UI/Seperator.js";
+
+export const Dashboard = () => {
+  const { setConnectDialogOpen } = useAppStore();
+  const { getDevices } = useDeviceStore();
+
+  const devices = useMemo(() => getDevices(), [getDevices]);
+
+  return (
+    <div className="flex flex-col gap-3 p-3">
+      <div className="flex items-center justify-between">
+        <div className="space-y-1">
+          <H3>Connected Devices</H3>
+          <Subtle>Manage, connect and disconnect devices</Subtle>
+        </div>
+      </div>
+
+      <Separator />
+
+      <div className="flex h-[450px] rounded-md border border-dashed border-slate-200 p-3 dark:border-slate-700">
+        {devices.length ? (
+          <ul role="list" className="grow divide-y divide-gray-200">
+            {devices.map((device) => {
+              return (
+                <li key={device.id}>
+                  <div className="px-4 py-4 sm:px-6">
+                    <div className="flex items-center justify-between">
+                      <p className="truncate text-sm font-medium text-accent">
+                        {device.nodes.filter(
+                          (n) => n.data.num === device.hardware.myNodeNum
+                        )[0]?.data.user?.longName ?? "UNK"}
+                      </p>
+                      <div className="inline-flex w-24 justify-center gap-2 rounded-full bg-slate-100 py-1 text-xs font-semibold text-slate-900 transition-colors hover:bg-slate-700 hover:text-slate-50">
+                        {device.connection?.connType === "ble" && (
+                          <>
+                            <BluetoothIcon size={16} />
+                            BLE
+                          </>
+                        )}
+                        {device.connection?.connType === "serial" && (
+                          <>
+                            <UsbIcon size={16} />
+                            Serial
+                          </>
+                        )}
+                        {device.connection?.connType === "http" && (
+                          <>
+                            <NetworkIcon size={16} />
+                            Network
+                          </>
+                        )}
+                      </div>
+                    </div>
+                    <div className="mt-2 sm:flex sm:justify-between">
+                      <div className="flex gap-2 text-sm text-gray-500">
+                        <UsersIcon
+                          size={20}
+                          className="text-gray-400"
+                          aria-hidden="true"
+                        />
+                        {device.nodes.length === 0
+                          ? 0
+                          : device.nodes.length - 1}
+                      </div>
+                    </div>
+                  </div>
+                </li>
+              );
+            })}
+          </ul>
+        ) : (
+          <div className="m-auto flex flex-col gap-3 text-center">
+            <ListPlusIcon size={48} className="mx-auto text-textSecondary" />
+            <H3>No Devices</H3>
+            <Subtle>Connect atleast one device to get started</Subtle>
+            <Button
+              className="gap-2"
+              onClick={() => setConnectDialogOpen(true)}
+            >
+              <PlusIcon size={16} />
+              New Connection
+            </Button>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};

src/components/DeviceSelector.tsx

@@ -1,69 +1,84 @@
 import { useAppStore } from "@core/stores/appStore.js";
 import { useDeviceStore } from "@core/stores/deviceStore.js";
-import { NavSpacer } from "@app/Nav/NavSpacer.js";
-import { PageNav } from "@app/Nav/PageNav.js";
 import { Hashicon } from "@emeraldpay/hashicon-react";
-import { PlusIcon } from "@heroicons/react/24/outline";
-import { MoonIcon, SunIcon } from "@primer/octicons-react";
+import {
+  PlusIcon,
+  HomeIcon,
+  LanguagesIcon,
+  SunIcon,
+  MoonIcon,
+  GithubIcon,
+  TerminalIcon
+} from "lucide-react";
+import { Separator } from "./UI/Seperator.js";
+import { Code } from "./UI/Typography/Code.js";
+import { DeviceSelectorButton } from "./DeviceSelectorButton.js";
 
 export const DeviceSelector = (): JSX.Element => {
   const { getDevices } = useDeviceStore();
-  const { selectedDevice, setSelectedDevice, darkMode, setDarkMode } =
-    useAppStore();
+  const {
+    selectedDevice,
+    setSelectedDevice,
+    darkMode,
+    setDarkMode,
+    setCommandPaletteOpen,
+    setConnectDialogOpen
+  } = useAppStore();
 
   return (
-    <div className="flex h-full w-14 items-center gap-3 bg-backgroundPrimary pt-3 [writing-mode:vertical-rl]">
-      <div className="flex items-center gap-3">
-        <span className="flex font-bold text-textPrimary">
+    <nav className="flex flex-col justify-between border-r-[0.5px] border-slate-300 bg-transparent pt-2 dark:border-slate-700">
+      <div className="flex flex-col overflow-y-hidden">
+        <ul className="flex w-20 grow flex-col items-center space-y-4 bg-transparent py-4 px-5">
+          <DeviceSelectorButton
+            active={selectedDevice === 0}
+            onClick={() => {
+              setSelectedDevice(0);
+            }}
+          >
+            <HomeIcon />
+          </DeviceSelectorButton>
           {getDevices().map((device) => (
-            <div
+            <DeviceSelectorButton
               key={device.id}
               onClick={() => {
                 setSelectedDevice(device.id);
               }}
-              className={`cursor-pointer border-x-4 border-backgroundPrimary bg-backgroundPrimary py-3 px-2 hover:brightness-hover active:brightness-press ${
-                selectedDevice === device.id ? "border-l-accent" : ""
-              }`}
+              active={selectedDevice === device.id}
             >
               <Hashicon
-                size={32}
+                size={24}
                 value={device.hardware.myNodeNum.toString()}
               />
-            </div>
+            </DeviceSelectorButton>
           ))}
-          <div
-            onClick={() => {
-              setSelectedDevice(0);
-            }}
-            className={`cursor-pointer border-x-4 border-backgroundPrimary bg-backgroundPrimary py-4 px-3 hover:brightness-hover active:brightness-press ${
-              selectedDevice === 0 ? "border-l-accent" : ""
-            }`}
+          <Separator />
+          <button
+            onClick={() => setConnectDialogOpen(true)}
+            className="transition-all duration-300 hover:text-accent"
           >
-            <PlusIcon className="w-6" />
-          </div>
-        </span>
+            <PlusIcon />
+          </button>
+        </ul>
       </div>
-
-      {selectedDevice !== 0 && (
-        <>
-          <NavSpacer />
-          <PageNav />
-        </>
-      )}
-
-      <NavSpacer />
-
-      <div
-        onClick={() => setDarkMode(!darkMode)}
-        className="bg-backgroundPrimary py-5 px-4 text-textSecondary hover:text-textPrimary hover:brightness-hover active:brightness-press"
-      >
-        {darkMode ? <SunIcon className="w-4" /> : <MoonIcon className="w-4" />}
+      <div className="flex w-20 flex-col items-center space-y-5 bg-transparent px-5 pb-5">
+        <button
+          className="transition-all hover:text-accent"
+          onClick={() => setDarkMode(!darkMode)}
+        >
+          {darkMode ? <SunIcon /> : <MoonIcon />}
+        </button>
+        <button
+          className="transition-all hover:text-accent"
+          onClick={() => setCommandPaletteOpen(true)}
+        >
+          <TerminalIcon />
+        </button>
+        <button className="transition-all hover:text-accent">
+          <LanguagesIcon />
+        </button>
+        <Separator />
+        <Code>{process.env.COMMIT_HASH}</Code>
       </div>
-
-      <img
-        src={darkMode ? "Logo_White.svg" : "Logo_Black.svg"}
-        className="mt-auto px-2 py-3"
-      />
-    </div>
+    </nav>
   );
 };

src/components/DeviceSelectorButton.tsx

@@ -0,0 +1,22 @@
+import { cn } from "@app/core/utils/cn.js";
+
+export interface DeviceSelectorButtonProps {
+  active: boolean;
+  onClick: () => void;
+  children?: React.ReactNode;
+}
+
+export const DeviceSelectorButton = ({
+  active,
+  onClick,
+  children
+}: DeviceSelectorButtonProps): JSX.Element => (
+  <li className="aspect-w-1 aspect-h-1 relative w-full" onClick={onClick}>
+    {active && (
+      <div className="absolute -left-2 h-10 w-1.5 rounded-full bg-accent" />
+    )}
+    <div className="flex aspect-square cursor-pointer flex-col items-center justify-center">
+      {children}
+    </div>
+  </li>
+);

src/components/Dialog/DeviceNameDialog.tsx

@@ -0,0 +1,74 @@
+import { Input } from "@components/UI/Input.js";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle
+} from "@components/UI/Dialog.js";
+import { Button } from "@components/UI/Button.js";
+import { useDevice } from "@app/core/stores/deviceStore.js";
+import { useForm } from "react-hook-form";
+import { Protobuf } from "@meshtastic/meshtasticjs";
+import { Label } from "../UI/Label.js";
+
+export interface User {
+  longName: string;
+  shortName: string;
+}
+
+export interface DeviceNameDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+}
+
+export const DeviceNameDialog = ({
+  open,
+  onOpenChange
+}: DeviceNameDialogProps): JSX.Element => {
+  const { hardware, nodes, connection, setDialogOpen } = useDevice();
+
+  const myNode = nodes.find((n) => n.data.num === hardware.myNodeNum);
+
+  const { register, handleSubmit } = useForm<User>({
+    values: {
+      longName: myNode?.data.user?.longName ?? "Unknown",
+      shortName: myNode?.data.user?.shortName ?? "Unknown"
+    }
+  });
+
+  const onSubmit = handleSubmit((data) => {
+    connection?.setOwner(
+      new Protobuf.User({
+        ...myNode?.data.user,
+        ...data
+      })
+    );
+    setDialogOpen("deviceName", false);
+  });
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>Change Device Name</DialogTitle>
+          <DialogDescription>
+            The Device will restart once the config is saved.
+          </DialogDescription>
+        </DialogHeader>
+        <div className="gap-4">
+          <form onSubmit={onSubmit}>
+            <Label>Long Name</Label>
+            <Input {...register("longName")} />
+            <Label>Short Name</Label>
+            <Input maxLength={4} {...register("shortName")} />
+          </form>
+        </div>
+        <DialogFooter>
+          <Button onClick={() => onSubmit()}>Save</Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+};

src/components/Dialog/DialogManager.tsx

@@ -1,41 +1,48 @@
-import { useDevice } from "@core/providers/useDevice.js";
+import { useDevice } from "@core/stores/deviceStore.js";
 import { QRDialog } from "@components/Dialog/QRDialog.js";
 import { RebootDialog } from "@components/Dialog/RebootDialog.js";
 import { ShutdownDialog } from "@components/Dialog/ShutdownDialog.js";
 import { ImportDialog } from "@components/Dialog/ImportDialog.js";
+import { DeviceNameDialog } from "./DeviceNameDialog.js";
 
 export const DialogManager = (): JSX.Element => {
   const { channels, config, dialog, setDialogOpen } = useDevice();
   return (
     <>
       <QRDialog
-        isOpen={dialog.QR}
-        close={() => {
-          setDialogOpen("QR", false);
+        open={dialog.QR}
+        onOpenChange={(open) => {
+          setDialogOpen("QR", open);
         }}
         channels={channels.map((ch) => ch.config)}
         loraConfig={config.lora}
       />
       <ImportDialog
-        isOpen={dialog.import}
-        close={() => {
-          setDialogOpen("import", false);
+        open={dialog.import}
+        onOpenChange={(open) => {
+          setDialogOpen("import", open);
         }}
         channels={channels.map((ch) => ch.config)}
         loraConfig={config.lora}
       />
       <ShutdownDialog
-        isOpen={dialog.shutdown}
-        close={() => {
+        open={dialog.shutdown}
+        onOpenChange={() => {
           setDialogOpen("shutdown", false);
         }}
       />
       <RebootDialog
-        isOpen={dialog.reboot}
-        close={() => {
+        open={dialog.reboot}
+        onOpenChange={() => {
           setDialogOpen("reboot", false);
         }}
       />
+      <DeviceNameDialog
+        open={dialog.deviceName}
+        onOpenChange={(open) => {
+          setDialogOpen("deviceName", open);
+        }}
+      />
     </>
   );
 };

src/components/Dialog/ImportDialog.tsx

@@ -2,24 +2,29 @@ import { useEffect, useState } from "react";
 import { toByteArray } from "base64-js";
 import { Checkbox } from "@components/form/Checkbox.js";
 import { Input } from "@components/form/Input.js";
-import { Dialog } from "@components/generic/Dialog.js";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle
+} from "@components/UI/Dialog.js";
 import { Protobuf } from "@meshtastic/meshtasticjs";
-import { Select } from "@components/form/Select.js";
-import { renderOptions } from "@core/utils/selectEnumOptions.js";
 import { Toggle } from "@components/form/Toggle.js";
-import { Button } from "@components/form/Button.js";
-import { useDevice } from "@core/providers/useDevice.js";
+import { Button } from "@components/UI/Button.js";
+import { useDevice } from "@core/stores/deviceStore.js";
 
 export interface ImportDialogProps {
-  isOpen: boolean;
-  close: () => void;
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
   loraConfig?: Protobuf.Config_LoRaConfig;
   channels: Protobuf.Channel[];
 }
 
 export const ImportDialog = ({
-  isOpen,
-  close
+  open,
+  onOpenChange
 }: ImportDialogProps): JSX.Element => {
   const [QRCodeURL, setQRCodeURL] = useState<string>("");
   const [channelSet, setChannelSet] = useState<Protobuf.ChannelSet>();
@@ -68,69 +73,73 @@ export const ImportDialog = ({
   };
 
   return (
-    <Dialog
-      title={"Import Channel Set"}
-      description={"The current LoRa configuration will be overridden."}
-      isOpen={isOpen}
-      close={close}
-    >
-      <div className="flex flex-col gap-3">
-        <Input
-          label="Channel Set/QR Code URL"
-          value={QRCodeURL}
-          suffix={validURL ? "✅" : "❌"}
-          onChange={(e) => {
-            setQRCodeURL(e.target.value);
-          }}
-        />
-        {validURL && (
-          <div className="flex flex-col gap-3">
-            <div className="flex w-full gap-2">
-              <div className="w-36">
-                <Toggle
-                  className="flex-col gap-2"
-                  label="Use Preset?"
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>Import Channel Set</DialogTitle>
+          <DialogDescription>
+            The current LoRa configuration will be overridden.
+          </DialogDescription>
+        </DialogHeader>
+        <div className="flex flex-col gap-3">
+          <Input
+            label="Channel Set/QR Code URL"
+            value={QRCodeURL}
+            suffix={validURL ? "✅" : "❌"}
+            onChange={(e) => {
+              setQRCodeURL(e.target.value);
+            }}
+          />
+          {validURL && (
+            <div className="flex flex-col gap-3">
+              <div className="flex w-full gap-2">
+                <div className="w-36">
+                  <Toggle
+                    label="Use Preset?"
+                    disabled
+                    checked={channelSet?.loraConfig?.usePreset ?? true}
+                  />
+                </div>
+                {/* <Select
+                  label="Modem Preset"
                   disabled
-                  checked={channelSet?.loraConfig?.usePreset ?? true}
-                />
+                  value={channelSet?.loraConfig?.modemPreset}
+                >
+                  {renderOptions(Protobuf.Config_LoRaConfig_ModemPreset)}
+                </Select> */}
               </div>
-              <Select
-                label="Modem Preset"
+              {/* <Select
+                label="Region"
                 disabled
-                value={channelSet?.loraConfig?.modemPreset}
+                value={channelSet?.loraConfig?.region}
               >
-                {renderOptions(Protobuf.Config_LoRaConfig_ModemPreset)}
-              </Select>
-            </div>
-            <Select
-              label="Region"
-              disabled
-              value={channelSet?.loraConfig?.region}
-            >
-              {renderOptions(Protobuf.Config_LoRaConfig_RegionCode)}
-            </Select>
+                {renderOptions(Protobuf.Config_LoRaConfig_RegionCode)}
+              </Select> */}
 
-            <span className="text-md block font-medium text-textPrimary">
-              Channels:
-            </span>
-            <div className="flex w-40 flex-col gap-1">
-              {channelSet?.settings.map((channel, index) => (
-                <Checkbox
-                  key={index}
-                  label={
-                    channel.name.length
-                      ? channel.name
-                      : `Channel: ${channel.id}`
-                  }
-                />
-              ))}
+              <span className="text-md block font-medium text-textPrimary">
+                Channels:
+              </span>
+              <div className="flex w-40 flex-col gap-1">
+                {channelSet?.settings.map((channel, index) => (
+                  <Checkbox
+                    key={index}
+                    label={
+                      channel.name.length
+                        ? channel.name
+                        : `Channel: ${channel.id}`
+                    }
+                  />
+                ))}
+              </div>
             </div>
-          </div>
-        )}
-        <Button onClick={() => apply()} disabled={!validURL}>
-          Apply
-        </Button>
-      </div>
+          )}
+        </div>
+        <DialogFooter>
+          <Button onClick={apply} disabled={!validURL}>
+            Apply
+          </Button>
+        </DialogFooter>
+      </DialogContent>
     </Dialog>
   );
 };

src/components/Dialog/NewDevice.tsx

@@ -0,0 +1,97 @@
+import { Input } from "@components/form/Input.js";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle
+} from "@components/UI/Dialog.js";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "../UI/Tabs.js";
+import { Subtle } from "../UI/Typography/Subtle.js";
+import { Link } from "../UI/Typography/Link.js";
+import { HTTP } from "../PageComponents/Connect/HTTP.js";
+import { BLE } from "../PageComponents/Connect/BLE.js";
+import { Serial } from "../PageComponents/Connect/Serial.js";
+
+const tabs = [
+  {
+    label: "HTTP",
+    element: HTTP,
+    disabled: false,
+    disabledMessage: "Unsuported connection method"
+  },
+  {
+    label: "Bluetooth",
+    element: BLE,
+    disabled: !navigator.bluetooth,
+    disabledMessage:
+      "Web Bluetooth is currently only supported by Chromium-based browsers",
+    disabledLink:
+      "https://developer.mozilla.org/en-US/docs/Web/API/Web_Serial_API#browser_compatibility"
+  },
+  {
+    label: "Serial",
+    element: Serial,
+    disabled: !navigator.serial,
+    disabledMessage:
+      "WebSerial is currently only supported by Chromium based browsers: https://developer.mozilla.org/en-US/docs/Web/API/Web_Bluetooth_API#browser_compatibility"
+  }
+];
+export interface NewDeviceProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+}
+
+export const NewDeviceDialog = ({
+  open,
+  onOpenChange
+}: NewDeviceProps): JSX.Element => {
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>Connect New Device</DialogTitle>
+        </DialogHeader>
+        <Tabs defaultValue="HTTP">
+          <TabsList>
+            {tabs.map((tab) => (
+              <TabsTrigger value={tab.label} disabled={tab.disabled}>
+                {tab.label}
+              </TabsTrigger>
+            ))}
+          </TabsList>
+          {tabs.map((tab) => (
+            <TabsContent value={tab.label}>
+              {tab.disabled ? (
+                <p className="text-sm text-slate-500 dark:text-slate-400">
+                  {tab.disabledMessage}
+                </p>
+              ) : (
+                <tab.element />
+              )}
+            </TabsContent>
+          ))}
+        </Tabs>
+
+        {(!navigator.bluetooth || !navigator.serial) && (
+          <>
+            <Subtle>
+              Web Bluetooth and Web Serial are currently only supported by
+              Chromium-based browsers.
+            </Subtle>
+            <Subtle>
+              Read more:&nbsp;
+              <Link href="https://developer.mozilla.org/en-US/docs/Web/API/Web_Bluetooth_API#browser_compatibility">
+                Web Bluetooth
+              </Link>
+              &nbsp;
+              <Link href="https://developer.mozilla.org/en-US/docs/Web/API/Web_Serial_API#browser_compatibility">
+                Web Serial
+              </Link>
+            </Subtle>
+          </>
+        )}
+      </DialogContent>
+    </Dialog>
+  );
+};

src/components/Dialog/QRDialog.tsx

@@ -1,23 +1,29 @@
 import { useEffect, useState } from "react";
 import { fromByteArray } from "base64-js";
-import { toast } from "react-hot-toast";
 import { QRCode } from "react-qrcode-logo";
 import { Checkbox } from "@components/form/Checkbox.js";
 import { Input } from "@components/form/Input.js";
-import { Dialog } from "@components/generic/Dialog.js";
-import { ClipboardIcon } from "@heroicons/react/24/outline";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle
+} from "@components/UI/Dialog.js";
+import { ClipboardIcon } from "lucide-react";
 import { Protobuf } from "@meshtastic/meshtasticjs";
 
 export interface QRDialogProps {
-  isOpen: boolean;
-  close: () => void;
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
   loraConfig?: Protobuf.Config_LoRaConfig;
   channels: Protobuf.Channel[];
 }
 
 export const QRDialog = ({
-  isOpen,
-  close,
+  open,
+  onOpenChange,
   loraConfig,
   channels
 }: QRDialogProps): JSX.Element => {
@@ -44,58 +50,57 @@ export const QRDialog = ({
   }, [channels, selectedChannels, loraConfig]);
 
   return (
-    <Dialog
-      title={"Generate QR Code"}
-      description={"The current LoRa configuration will also be shared."}
-      isOpen={isOpen}
-      close={close}
-    >
-      <div className="flex gap-3 px-4 py-5 sm:p-6">
-        <div className="flex w-40 flex-col gap-1">
-          {channels.map((channel) => (
-            <Checkbox
-              key={channel.index}
-              disabled={
-                channel.index === 0 ||
-                channel.role === Protobuf.Channel_Role.DISABLED
-              }
-              label={
-                channel.settings?.name.length
-                  ? channel.settings.name
-                  : channel.role === Protobuf.Channel_Role.PRIMARY
-                  ? "Primary"
-                  : `Channel: ${channel.index}`
-              }
-              checked={selectedChannels.includes(channel.index)}
-              onChange={() => {
-                if (selectedChannels.includes(channel.index)) {
-                  setSelectedChannels(
-                    selectedChannels.filter((c) => c !== channel.index)
-                  );
-                } else {
-                  setSelectedChannels([...selectedChannels, channel.index]);
-                }
-              }}
-            />
-          ))}
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>Generate QR Code</DialogTitle>
+          <DialogDescription>
+            The current LoRa configuration will also be shared.
+          </DialogDescription>
+        </DialogHeader>
+        <div className="grid gap-4 py-4">
+          <div className="flex gap-3 px-4 py-5 sm:p-6">
+            <div className="flex w-40 flex-col gap-1">
+              {channels.map((channel) => (
+                <Checkbox
+                  key={channel.index}
+                  label={
+                    channel.settings?.name.length
+                      ? channel.settings.name
+                      : channel.role === Protobuf.Channel_Role.PRIMARY
+                      ? "Primary"
+                      : `Channel: ${channel.index}`
+                  }
+                  checked={selectedChannels.includes(channel.index)}
+                  onChange={() => {
+                    if (selectedChannels.includes(channel.index)) {
+                      setSelectedChannels(
+                        selectedChannels.filter((c) => c !== channel.index)
+                      );
+                    } else {
+                      setSelectedChannels([...selectedChannels, channel.index]);
+                    }
+                  }}
+                />
+              ))}
+            </div>
+            <QRCode value={QRCodeURL} size={200} qrStyle="dots" />
+          </div>
         </div>
-        <QRCode value={QRCodeURL} size={200} qrStyle="dots" />
-      </div>
-
-      <div className="sm:px-6">
-        <Input
-          label="Sharable URL"
-          value={QRCodeURL}
-          disabled
-          action={{
-            icon: <ClipboardIcon className="h-4" />,
-            action() {
-              void navigator.clipboard.writeText(QRCodeURL);
-              toast.success("Copied URL to Clipboard");
-            }
-          }}
-        />
-      </div>
+        <DialogFooter>
+          <Input
+            label="Sharable URL"
+            value={QRCodeURL}
+            disabled
+            action={{
+              icon: <ClipboardIcon size={16} />,
+              action() {
+                void navigator.clipboard.writeText(QRCodeURL);
+              }
+            }}
+          />
+        </DialogFooter>
+      </DialogContent>
     </Dialog>
   );
 };

src/components/Dialog/RebootDialog.tsx

@@ -1,56 +1,64 @@
 import { useState } from "react";
-import { useDevice } from "@core/providers/useDevice.js";
-import { Dialog } from "@components/generic/Dialog.js";
-import { ArrowPathIcon, ClockIcon } from "@heroicons/react/24/outline";
-import { Button } from "@components/form/Button.js";
+import { useDevice } from "@core/stores/deviceStore.js";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle
+} from "@components/UI/Dialog.js";
+import { ClockIcon, RefreshCwIcon } from "lucide-react";
+import { Button } from "@components/UI/Button.js";
 import { Input } from "@components/form/Input.js";
 
 export interface RebootDialogProps {
-  isOpen: boolean;
-  close: () => void;
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
 }
 
 export const RebootDialog = ({
-  isOpen,
-  close
+  open,
+  onOpenChange
 }: RebootDialogProps): JSX.Element => {
   const { connection, setDialogOpen } = useDevice();
 
   const [time, setTime] = useState<number>(5);
 
   return (
-    <Dialog
-      title={"Schedule Reboot"}
-      description={"Reboot the connected node after x minutes."}
-      isOpen={isOpen}
-      close={close}
-    >
-      <div className="flex gap-2 p-4">
-        <Input
-          type="number"
-          value={time}
-          onChange={(e) => setTime(parseInt(e.target.value))}
-          action={{
-            icon: <ClockIcon className="w-4" />,
-            action() {
-              connection
-                ?.reboot(time * 60)
-                .then(() => setDialogOpen("reboot", false));
-            }
-          }}
-        />
-        <Button
-          className="w-24"
-          onClick={() => {
-            connection?.reboot(2).then(() => setDialogOpen("reboot", false));
-          }}
-        >
-          <span>
-            <ArrowPathIcon className="w-4" />
-          </span>
-          Now
-        </Button>
-      </div>
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>Schedule Reboot</DialogTitle>
+          <DialogDescription>
+            Reboot the connected node after x minutes.
+          </DialogDescription>
+        </DialogHeader>
+        <div className="flex gap-2 p-4">
+          <Input
+            type="number"
+            value={time}
+            onChange={(e) => setTime(parseInt(e.target.value))}
+            action={{
+              icon: <ClockIcon size={16} />,
+              action() {
+                connection
+                  ?.reboot(time * 60)
+                  .then(() => setDialogOpen("reboot", false));
+              }
+            }}
+          />
+          <Button
+            className="w-24"
+            onClick={() => {
+              connection?.reboot(2).then(() => setDialogOpen("reboot", false));
+            }}
+          >
+            <RefreshCwIcon size={16} />
+            Now
+          </Button>
+        </div>
+      </DialogContent>
     </Dialog>
   );
 };

src/components/Dialog/ShutdownDialog.tsx

@@ -1,56 +1,66 @@
 import { useState } from "react";
-import { useDevice } from "@core/providers/useDevice.js";
-import { Dialog } from "@components/generic/Dialog.js";
-import { ClockIcon, PowerIcon } from "@heroicons/react/24/outline";
-import { Button } from "@components/form/Button.js";
+import { useDevice } from "@core/stores/deviceStore.js";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle
+} from "@components/UI/Dialog.js";
+import { ClockIcon, PowerIcon } from "lucide-react";
+import { Button } from "@components/UI/Button.js";
 import { Input } from "@components/form/Input.js";
 
 export interface ShutdownDialogProps {
-  isOpen: boolean;
-  close: () => void;
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
 }
 
 export const ShutdownDialog = ({
-  isOpen,
-  close
+  open,
+  onOpenChange
 }: ShutdownDialogProps): JSX.Element => {
   const { connection, setDialogOpen } = useDevice();
 
   const [time, setTime] = useState<number>(5);
 
   return (
-    <Dialog
-      title={"Schedule Shutdown"}
-      description={"Turn off the connected node after x minutes."}
-      isOpen={isOpen}
-      close={close}
-    >
-      <div className="flex gap-2 p-4">
-        <Input
-          type="number"
-          value={time}
-          onChange={(e) => setTime(parseInt(e.target.value))}
-          action={{
-            icon: <ClockIcon className="w-4" />,
-            action() {
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>Schedule Shutdown</DialogTitle>
+          <DialogDescription>
+            Turn off the connected node after x minutes.
+          </DialogDescription>
+        </DialogHeader>
+
+        <div className="flex gap-2 p-4">
+          <Input
+            type="number"
+            value={time}
+            onChange={(e) => setTime(parseInt(e.target.value))}
+            action={{
+              icon: <ClockIcon size={16} />,
+              action() {
+                connection
+                  ?.shutdown(time * 60)
+                  .then(() => setDialogOpen("shutdown", false));
+              }
+            }}
+          />
+          <Button
+            className="w-24"
+            onClick={() => {
               connection
-                ?.shutdown(time * 60)
+                ?.shutdown(2)
                 .then(() => setDialogOpen("shutdown", false));
-            }
-          }}
-        />
-        <Button
-          className="w-24"
-          onClick={() => {
-            connection
-              ?.shutdown(2)
-              .then(() => setDialogOpen("shutdown", false));
-          }}
-        >
-          <PowerIcon className="w-4" />
-          <span>Now</span>
-        </Button>
-      </div>
+            }}
+          >
+            <PowerIcon size={16} />
+            <span>Now</span>
+          </Button>
+        </div>
+      </DialogContent>
     </Dialog>
   );
 };

src/components/Drawer/Metrics.tsx

@@ -1,134 +0,0 @@
-import "chartjs-adapter-date-fns";
-import {
-  Chart as ChartJS,
-  Filler,
-  Legend,
-  LinearScale,
-  LineElement,
-  PointElement,
-  TimeSeriesScale,
-  Tooltip
-} from "chart.js";
-import { Line } from "react-chartjs-2";
-import { useDevice } from "@core/providers/useDevice.js";
-
-export const Metrics = (): JSX.Element => {
-  const { nodes, hardware } = useDevice();
-
-  const myNode = nodes.find((n) => n.data.num === hardware.myNodeNum);
-
-  ChartJS.register(
-    LinearScale,
-    PointElement,
-    LineElement,
-    Tooltip,
-    Filler,
-    Legend,
-    TimeSeriesScale
-  );
-
-  return (
-    <div className="flex h-full w-full flex-grow">
-      <Line
-        className="h-full w-full flex-grow"
-        options={{
-          responsive: true,
-          maintainAspectRatio: false,
-          interaction: {
-            mode: "index",
-            intersect: false
-          },
-          line: {
-            datasets: {
-              tension: 0.5
-            }
-          },
-          scales: {
-            x: {
-              type: "timeseries",
-              ticks: {
-                display: false
-              }
-            },
-            y: {
-              ticks: {
-                display: false
-              }
-            },
-            y1: {
-              display: false
-            },
-            y2: {
-              display: false
-            },
-            y3: {
-              display: false
-            }
-          },
-          plugins: {}
-        }}
-        data={{
-          labels: [],
-          datasets: [
-            {
-              fill: true,
-              label: "airUtilTx",
-              yAxisID: "y",
-              data: myNode?.deviceMetrics.map((metric) => {
-                return {
-                  x: metric.timestamp,
-                  y: metric.metric.airUtilTx
-                };
-              }),
-              backgroundColor: "rgba(102, 126, 234, 0.25)",
-              borderColor: "rgba(102, 126, 234, 1)",
-              pointBackgroundColor: "rgba(102, 126, 234, 1)"
-            },
-            {
-              fill: true,
-              label: "channelUtilization",
-              yAxisID: "y1",
-              data: myNode?.deviceMetrics.map((metric) => {
-                return {
-                  x: metric.timestamp,
-                  y: metric.metric.channelUtilization
-                };
-              }),
-              backgroundColor: "rgba(237, 100, 166, 0.25)",
-              borderColor: "rgba(237, 100, 166, 1)",
-              pointBackgroundColor: "rgba(237, 100, 166, 1)"
-            },
-            {
-              fill: true,
-              label: "batteryLevel",
-              yAxisID: "y2",
-              data: myNode?.deviceMetrics.map((metric) => {
-                return {
-                  x: metric.timestamp,
-                  y: metric.metric.batteryLevel
-                };
-              }),
-              backgroundColor: "rgba(113, 234, 102, 0.25)",
-              borderColor: "rgba(113, 234, 102, 1)",
-              pointBackgroundColor: "rgba(113, 234, 102, 1)"
-            },
-            {
-              fill: true,
-              label: "voltage",
-              yAxisID: "y3",
-              data: myNode?.deviceMetrics.map((metric) => {
-                return {
-                  x: metric.timestamp,
-                  y: metric.metric.voltage
-                };
-              }),
-              backgroundColor: "rgba(234, 166, 102, 0.25)",
-              borderColor: "rgba(234, 166, 102, 1)",
-              pointBackgroundColor: "rgba(234, 166, 102, 1)"
-            }
-          ]
-        }}
-      />
-    </div>
-  );
-};

src/components/Drawer/Notifications.tsx

@@ -1,3 +0,0 @@
-export const Notifications = (): JSX.Element => {
-  return <div></div>;
-};

src/components/Drawer/Sensor.tsx

@@ -1,170 +0,0 @@
-import "chartjs-adapter-date-fns";
-
-import {
-  Chart as ChartJS,
-  Filler,
-  Legend,
-  LinearScale,
-  LineElement,
-  PointElement,
-  TimeSeriesScale,
-  Tooltip
-} from "chart.js";
-import { Line } from "react-chartjs-2";
-
-import { useDevice } from "@core/providers/useDevice.js";
-
-export const Sensor = (): JSX.Element => {
-  const { nodes, hardware } = useDevice();
-
-  const myNode = nodes.find((n) => n.data.num === hardware.myNodeNum);
-
-  ChartJS.register(
-    LinearScale,
-    PointElement,
-    LineElement,
-    Tooltip,
-    Filler,
-    Legend,
-    TimeSeriesScale
-  );
-
-  return (
-    <div className="flex h-full w-full flex-grow">
-      <Line
-        className="h-full w-full flex-grow"
-        options={{
-          responsive: true,
-          maintainAspectRatio: false,
-          interaction: {
-            mode: "index",
-            intersect: false
-          },
-          line: {
-            datasets: {
-              tension: 0.5
-            }
-          },
-          scales: {
-            x: {
-              type: "timeseries",
-              ticks: {
-                display: false
-              }
-            },
-            y: {
-              ticks: {
-                display: false
-              }
-            },
-            y1: {
-              display: false
-            },
-            y2: {
-              display: false
-            },
-            y3: {
-              display: false
-            },
-            y4: {
-              display: false
-            },
-            y5: {
-              display: false
-            }
-          },
-          plugins: {}
-        }}
-        data={{
-          labels: [],
-          datasets: [
-            {
-              fill: true,
-              label: "barometricPressure",
-              yAxisID: "y",
-              data: myNode?.environmentMetrics.map((metric) => {
-                return {
-                  x: metric.timestamp,
-                  y: metric.metric.barometricPressure
-                };
-              }),
-              backgroundColor: "rgba(102, 126, 234, 0.25)",
-              borderColor: "rgba(102, 126, 234, 1)",
-              pointBackgroundColor: "rgba(102, 126, 234, 1)"
-            },
-            {
-              fill: true,
-              label: "current",
-              yAxisID: "y1",
-              data: myNode?.environmentMetrics.map((metric) => {
-                return {
-                  x: metric.timestamp,
-                  y: metric.metric.current
-                };
-              }),
-              backgroundColor: "rgba(237, 100, 166, 0.25)",
-              borderColor: "rgba(237, 100, 166, 1)",
-              pointBackgroundColor: "rgba(237, 100, 166, 1)"
-            },
-            {
-              fill: true,
-              label: "gasResistance",
-              yAxisID: "y2",
-              data: myNode?.environmentMetrics.map((metric) => {
-                return {
-                  x: metric.timestamp,
-                  y: metric.metric.gasResistance
-                };
-              }),
-              backgroundColor: "rgba(113, 234, 102, 0.25)",
-              borderColor: "rgba(113, 234, 102, 1)",
-              pointBackgroundColor: "rgba(113, 234, 102, 1)"
-            },
-            {
-              fill: true,
-              label: "relativeHumidity",
-              yAxisID: "y3",
-              data: myNode?.environmentMetrics.map((metric) => {
-                return {
-                  x: metric.timestamp,
-                  y: metric.metric.relativeHumidity
-                };
-              }),
-              backgroundColor: "rgba(234, 166, 102, 0.25)",
-              borderColor: "rgba(234, 166, 102, 1)",
-              pointBackgroundColor: "rgba(234, 166, 102, 1)"
-            },
-            {
-              fill: true,
-              label: "temperature",
-              yAxisID: "y4",
-              data: myNode?.environmentMetrics.map((metric) => {
-                return {
-                  x: metric.timestamp,
-                  y: metric.metric.temperature
-                };
-              }),
-              backgroundColor: "rgba(38, 255, 212, 0.25)",
-              borderColor: "rgba(38, 255, 212, 1)",
-              pointBackgroundColor: "rgba(38, 255, 212, 1)"
-            },
-            {
-              fill: true,
-              label: "voltage",
-              yAxisID: "y5",
-              data: myNode?.environmentMetrics.map((metric) => {
-                return {
-                  x: metric.timestamp,
-                  y: metric.metric.voltage
-                };
-              }),
-              backgroundColor: "rgba(247, 255, 15, 0.25)",
-              borderColor: "rgba(247, 255, 15, 1)",
-              pointBackgroundColor: "rgba(247, 255, 15, 1)"
-            }
-          ]
-        }}
-      />
-    </div>
-  );
-};

src/components/Drawer/index.tsx

@@ -1,66 +0,0 @@
-import { useState } from "react";
-import { Metrics } from "@components/Drawer/Metrics.js";
-import { Notifications } from "@components/Drawer/Notifications.js";
-import { Sensor } from "@components/Drawer/Sensor.js";
-import type { TabType } from "@components/generic/TabbedContent.js";
-import { Tab } from "@headlessui/react";
-import { ChevronDownIcon, ChevronUpIcon } from "@heroicons/react/24/outline";
-
-export const Drawer = (): JSX.Element => {
-  const [drawerOpen, setDrawerOpen] = useState(false);
-
-  const tabs: TabType[] = [
-    { label: "Notifications", element: Notifications },
-    { label: "Metrics", element: Metrics },
-    { label: "Sensor", element: Sensor }
-  ];
-  return (
-    <Tab.Group as="div">
-      <Tab.List className="flex w-full">
-        {tabs.map((tab, index) => (
-          <Tab key={index}>
-            {({ selected }) => (
-              <div
-                onClick={() => {
-                  setDrawerOpen(true);
-                }}
-                className={`flex h-full cursor-pointer border-b-4 px-1 first:pl-2 last:pr-2 hover:text-textPrimary ${
-                  selected
-                    ? "border-accent text-textPrimary"
-                    : "border-backgroundPrimary text-textSecondary"
-                }`}
-              >
-                <span className="m-auto select-none">{tab.label}</span>
-              </div>
-            )}
-          </Tab>
-        ))}
-
-        <div className="ml-auto flex h-8">
-          <div
-            onClick={() => {
-              setDrawerOpen(!drawerOpen);
-            }}
-            className="flex cursor-pointer px-2"
-          >
-            <div className="m-auto text-textSecondary">
-              {drawerOpen ? (
-                <ChevronDownIcon className="h-4" />
-              ) : (
-                <ChevronUpIcon className="h-4" />
-              )}
-            </div>
-          </div>
-        </div>
-      </Tab.List>
-
-      <Tab.Panels className={`${drawerOpen ? "flex" : "hidden"}`}>
-        {tabs.map((tab, index) => (
-          <Tab.Panel key={index} className="flex h-40 flex-grow">
-            {tab.element}
-          </Tab.Panel>
-        ))}
-      </Tab.Panels>
-    </Tab.Group>
-  );
-};

src/components/DynamicForm.tsx

@@ -0,0 +1,238 @@
+import {
+  Controller,
+  DeepPartial,
+  FieldValues,
+  Path,
+  SubmitHandler,
+  useForm
+} from "react-hook-form";
+import { Input } from "./UI/Input.js";
+import { Label } from "./UI/Label.js";
+import { ErrorMessage } from "@hookform/error-message";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue
+} from "./UI/Select.js";
+import { Switch } from "./UI/Switch.js";
+import { H4 } from "./UI/Typography/H4.js";
+import { Subtle } from "./UI/Typography/Subtle.js";
+
+interface DisabledBy<T> {
+  fieldName: Path<T>;
+  selector?: number;
+  invert?: boolean;
+}
+
+interface BasicFieldProps<T> {
+  name: Path<T>;
+  label: string;
+  description?: string;
+  active?: boolean;
+  required?: boolean;
+  disabledBy?: DisabledBy<T>[];
+}
+
+interface InputFieldProps<T> extends BasicFieldProps<T> {
+  type: "text" | "number" | "password";
+  suffix?: string;
+}
+
+interface SelectFieldProps<T> extends BasicFieldProps<T> {
+  type: "select" | "multiSelect";
+
+  enumValue: {
+    [s: string]: string | number;
+  };
+  formatEnumName?: boolean;
+}
+
+interface ToggleFieldProps<T> extends BasicFieldProps<T> {
+  type: "toggle";
+}
+
+export interface FormProps<T extends FieldValues> {
+  onSubmit: SubmitHandler<T>;
+  defaultValues?: DeepPartial<T>;
+  fieldGroups: {
+    label: string;
+    description: string;
+    fields: (InputFieldProps<T> | SelectFieldProps<T> | ToggleFieldProps<T>)[];
+  }[];
+}
+
+export function DynamicForm<T extends FieldValues>({
+  fieldGroups,
+  onSubmit,
+  defaultValues
+}: FormProps<T>) {
+  const { register, handleSubmit, control, getValues } = useForm<T>({
+    mode: "onChange",
+    defaultValues: defaultValues
+  });
+
+  const isDisabled = (disabledBy?: DisabledBy<T>[]): boolean => {
+    if (!disabledBy) return false;
+
+    return disabledBy.some((field) => {
+      const value = getValues(field.fieldName);
+      if (typeof value === "boolean") return field.invert ? value : !value;
+      if (typeof value === "number")
+        return field.invert
+          ? field.selector !== value
+          : field.selector === value;
+      return false;
+    });
+  };
+
+  return (
+    <form
+      className="space-y-8 divide-y divide-gray-200"
+      onChange={handleSubmit(onSubmit)}
+    >
+      {fieldGroups.map((fieldGroup) => (
+        <div className="space-y-8 divide-y divide-gray-200 sm:space-y-5">
+          <div>
+            <H4 className="font-medium">{fieldGroup.label}</H4>
+            <Subtle>{fieldGroup.description}</Subtle>
+          </div>
+
+          {fieldGroup.fields.map((field) => {
+            const fieldWrapperData: FieldWrapperProps = {
+              label: field.label,
+              description: field.description,
+              disabled: isDisabled(field.disabledBy)
+            };
+
+            switch (field.type) {
+              case "text":
+                return (
+                  <FieldWrapper {...fieldWrapperData}>
+                    <Input
+                      disabled={fieldWrapperData.disabled}
+                      {...register(field.name)}
+                    />
+                  </FieldWrapper>
+                );
+              case "number":
+                return (
+                  <FieldWrapper {...fieldWrapperData}>
+                    <Input
+                      type="number"
+                      disabled={fieldWrapperData.disabled}
+                      {...register(field.name)}
+                    />
+                  </FieldWrapper>
+                );
+              case "password":
+                return (
+                  <FieldWrapper {...fieldWrapperData}>
+                    <Input
+                      type="password"
+                      disabled={fieldWrapperData.disabled}
+                      {...register(field.name)}
+                    />
+                  </FieldWrapper>
+                );
+              case "toggle":
+                return (
+                  <FieldWrapper {...fieldWrapperData}>
+                    <Controller
+                      name={field.name}
+                      control={control}
+                      render={({ field: { value, onChange, ...rest } }) => (
+                        <Switch
+                          checked={value}
+                          onCheckedChange={onChange}
+                          disabled={fieldWrapperData.disabled}
+                          {...rest}
+                        />
+                      )}
+                    />
+                  </FieldWrapper>
+                );
+              case "select":
+                const optionsEnumValues = field.enumValue
+                  ? Object.entries(field.enumValue).filter(
+                      (value) => typeof value[1] === "number"
+                    )
+                  : [];
+                return (
+                  <FieldWrapper {...fieldWrapperData}>
+                    <Controller
+                      name={field.name}
+                      control={control}
+                      render={({ field: { value, onChange, ...rest } }) => (
+                        <Select
+                          onValueChange={(e) => onChange(parseInt(e))}
+                          disabled={fieldWrapperData.disabled}
+                          value={value?.toString()}
+                          {...rest}
+                        >
+                          <SelectTrigger>
+                            <SelectValue />
+                          </SelectTrigger>
+                          <SelectContent>
+                            {optionsEnumValues.map(([name, value], index) => (
+                              <SelectItem key={index} value={value.toString()}>
+                                {field.formatEnumName
+                                  ? name
+                                      .replace(/_/g, " ")
+                                      .toLowerCase()
+                                      .split(" ")
+                                      .map(
+                                        (s) =>
+                                          s.charAt(0).toUpperCase() +
+                                          s.substring(1)
+                                      )
+                                      .join(" ")
+                                  : name}
+                              </SelectItem>
+                            ))}
+                          </SelectContent>
+                        </Select>
+                      )}
+                    />
+                  </FieldWrapper>
+                );
+              case "multiSelect":
+                return <FieldWrapper {...fieldWrapperData}>tmp</FieldWrapper>;
+            }
+          })}
+        </div>
+      ))}
+    </form>
+  );
+}
+
+interface FieldWrapperProps {
+  label: string;
+  description?: string;
+  disabled?: boolean;
+  children?: React.ReactNode;
+}
+
+const FieldWrapper = ({
+  label,
+  description,
+  disabled,
+  children
+}: FieldWrapperProps): JSX.Element => (
+  <div className="pt-6 sm:pt-5">
+    <div role="group" aria-labelledby="label-notifications">
+      <div className="sm:grid sm:grid-cols-3 sm:items-baseline sm:gap-4">
+        <Label>{label}</Label>
+        <div className="sm:col-span-2">
+          <div className="max-w-lg">
+            <p className="text-sm text-gray-500">{description}</p>
+            <div className="mt-4 space-y-4">
+              <div className="flex items-center">{children}</div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+);

src/components/NewDevice.tsx

@@ -1,43 +0,0 @@
-import React from "react";
-
-import { TabbedContent, TabType } from "@components/generic/TabbedContent.js";
-import { BLE } from "@components/PageComponents/Connect/BLE.js";
-import { HTTP } from "@components/PageComponents/Connect/HTTP.js";
-import { Serial } from "@components/PageComponents/Connect/Serial.js";
-import { useAppStore } from "@core/stores/appStore.js";
-import { MoonIcon, SunIcon } from "@heroicons/react/24/outline";
-
-export const NewDevice = () => {
-  const { darkMode, setDarkMode } = useAppStore();
-
-  const tabs: TabType[] = [
-    {
-      label: "Bluetooth",
-      element: BLE,
-      disabled: !navigator.bluetooth,
-      disabledMessage:
-        "Web Bluetooth is currently only supported by Chromium-based browsers",
-      disabledLink:
-        "https://developer.mozilla.org/en-US/docs/Web/API/Web_Serial_API#browser_compatibility"
-    },
-    {
-      label: "HTTP",
-      element: HTTP,
-      disabled: false,
-      disabledMessage: "Unsuported connection method"
-    },
-    {
-      label: "Serial",
-      element: Serial,
-      disabled: !navigator.serial,
-      disabledMessage:
-        "WebSerial is currently only supported by Chromium based browsers: https://developer.mozilla.org/en-US/docs/Web/API/Web_Bluetooth_API#browser_compatibility"
-    }
-  ];
-
-  return (
-    <div className="m-auto h-96 w-96">
-      <TabbedContent tabs={tabs} />
-    </div>
-  );
-};

src/components/PageComponents/AppConfig/Map.tsx

@@ -1,118 +0,0 @@
-import { Controller, useFieldArray, useForm } from "react-hook-form";
-import { Button } from "@components/form/Button.js";
-import { IconButton } from "@components/form/IconButton.js";
-import { InfoWrapper } from "@components/form/InfoWrapper.js";
-import { Input } from "@components/form/Input.js";
-import { Toggle } from "@components/form/Toggle.js";
-import { useAppStore } from "@core/stores/appStore.js";
-import { MapValidation } from "@app/validation/appConfig/map.js";
-import { Form } from "@components/form/Form";
-import { TrashIcon } from "@heroicons/react/24/outline";
-import { classValidatorResolver } from "@hookform/resolvers/class-validator";
-
-export const Map = (): JSX.Element => {
-  const { rasterSources, setRasterSources } = useAppStore();
-
-  const {
-    register,
-    handleSubmit,
-    formState: { errors, isDirty },
-    control,
-    reset
-  } = useForm<MapValidation>({
-    defaultValues: {
-      // wmsSources: wmsSources ?? [
-      //   {
-      //     url: "",
-      //     tileSize: 512,
-      //     type: "raster"
-      //   }
-      // ]
-    },
-    resolver: classValidatorResolver(MapValidation)
-  });
-
-  const { fields, append, remove, insert } = useFieldArray({
-    control,
-    name: "rasterSources"
-  });
-
-  const onSubmit = handleSubmit((data) => {
-    setRasterSources(data.rasterSources);
-  });
-
-  // useEffect(() => {
-  //   reset(rasterSources);
-  // }, [reset, rasterSources]);
-
-  return (
-    <Form onSubmit={onSubmit}>
-      <InfoWrapper label="WMS Sources">
-        <div className="flex flex-col gap-2">
-          {fields.map((field, index) => (
-            <div key={field.id} className="flex w-full gap-2">
-              <Controller
-                name={`rasterSources.${index}.enabled`}
-                control={control}
-                render={({ field: { value, ...rest } }) => (
-                  <Toggle checked={value} {...rest} />
-                )}
-              />
-              <Input
-                placeholder="Name"
-                error={
-                  errors.rasterSources
-                    ? errors.rasterSources[index]?.title?.message
-                    : undefined
-                }
-                {...register(`rasterSources.${index}.title`)}
-              />
-              <Input
-                placeholder="Tile Size"
-                type="number"
-                error={
-                  errors.rasterSources
-                    ? errors.rasterSources[index]?.tileSize?.message
-                    : undefined
-                }
-                {...register(`rasterSources.${index}.tileSize`, {
-                  valueAsNumber: true
-                })}
-              />
-              <Input
-                placeholder="URL"
-                error={
-                  errors.rasterSources
-                    ? errors.rasterSources[index]?.tiles?.message
-                    : undefined
-                }
-                {...register(`rasterSources.${index}.tiles`)}
-              />
-              <IconButton
-                className="shrink-0"
-                icon={<TrashIcon className="w-4" />}
-                onClick={() => {
-                  remove(index);
-                }}
-              />
-            </div>
-          ))}
-          <Button
-            onClick={() => {
-              append({
-                enabled: true,
-                title: "",
-                tiles: [
-                  "https://img.nj.gov/imagerywms/Natural2015?bbox={bbox-epsg-3857}&format=image/png&service=WMS&version=1.1.1&request=GetMap&srs=EPSG:3857&transparent=true&width=256&height=256&layers=Natural2015"
-                ],
-                tileSize: 512
-              });
-            }}
-          >
-            New Source
-          </Button>
-        </div>
-      </InfoWrapper>
-    </Form>
-  );
-};

src/components/PageComponents/Channel.tsx

@@ -1,21 +1,13 @@
 import { useEffect, useState } from "react";
 import { fromByteArray, toByteArray } from "base64-js";
 import { Controller, useForm } from "react-hook-form";
-import { toast } from "react-hot-toast";
 import { ChannelSettingsValidation } from "@app/validation/channelSettings.js";
-import { Form } from "@components/form/Form";
 import { Input } from "@components/form/Input.js";
-import { Select } from "@components/form/Select.js";
 import { Toggle } from "@components/form/Toggle.js";
-import { useDevice } from "@core/providers/useDevice.js";
-import {
-  ArrowPathIcon,
-  EyeIcon,
-  EyeSlashIcon
-} from "@heroicons/react/24/outline";
+import { useDevice } from "@core/stores/deviceStore.js";
+import { RefreshCwIcon, EyeIcon, EyeOffIcon } from "lucide-react";
 import { classValidatorResolver } from "@hookform/resolvers/class-validator";
 import { Protobuf } from "@meshtastic/meshtasticjs";
-import { NavBar } from "@app/Nav/NavBar.js";
 
 export interface SettingsPanelProps {
   channel: Protobuf.Channel;
@@ -61,62 +53,41 @@ export const Channel = ({ channel }: SettingsPanelProps): JSX.Element => {
   }, [channel, reset]);
 
   const onSubmit = handleSubmit((data) => {
-    if (connection) {
-      void toast.promise(
-        connection
-          .setChannel(
-            new Protobuf.Channel({
-              role:
-                channel?.role === Protobuf.Channel_Role.PRIMARY
-                  ? Protobuf.Channel_Role.PRIMARY
-                  : data.enabled
-                  ? Protobuf.Channel_Role.SECONDARY
-                  : Protobuf.Channel_Role.DISABLED,
-              index: channel?.index,
-              settings: {
-                ...data,
-                psk: toByteArray(data.psk ?? "")
-              }
-            })
-          )
-          .then(() =>
-            addChannel({
-              config: new Protobuf.Channel({
-                index: channel.index,
-                role: channel.role,
-                settings: {
-                  ...data,
-                  psk: toByteArray(data.psk ?? "")
-                }
-              }),
-              lastInterraction: new Date(),
-              messages: []
-            })
-          ),
-        {
-          loading: "Saving...",
-          success: "Saved Channel",
-          error: "No response received"
-        }
+    connection
+      ?.setChannel(
+        new Protobuf.Channel({
+          role:
+            channel?.role === Protobuf.Channel_Role.PRIMARY
+              ? Protobuf.Channel_Role.PRIMARY
+              : data.enabled
+              ? Protobuf.Channel_Role.SECONDARY
+              : Protobuf.Channel_Role.DISABLED,
+          index: channel?.index,
+          settings: {
+            ...data,
+            psk: toByteArray(data.psk ?? "")
+          }
+        })
+      )
+      .then(() =>
+        addChannel({
+          config: new Protobuf.Channel({
+            index: channel.index,
+            role: channel.role,
+            settings: {
+              ...data,
+              psk: toByteArray(data.psk ?? "")
+            }
+          }),
+          lastInterraction: new Date(),
+          messages: []
+        })
       );
-    }
   });
 
   return (
-    <div className="flex flex-grow flex-col gap-2">
-      <NavBar
-        breadcrumb={["Channels", channel?.index.toString()]}
-        actions={[
-          {
-            label: "Apply",
-            async onClick() {
-              await onSubmit();
-            }
-          }
-        ]}
-      />
-
-      <Form onSubmit={onSubmit}>
+    <div className="p-3">
+      <form onSubmit={onSubmit}>
         {channel?.index !== 0 && (
           <>
             <Controller
@@ -139,7 +110,7 @@ export const Channel = ({ channel }: SettingsPanelProps): JSX.Element => {
             />
           </>
         )}
-        <Select
+        {/* <Select
           label="Key Size"
           description="Desired size of generated key."
           value={keySize}
@@ -147,7 +118,7 @@ export const Channel = ({ channel }: SettingsPanelProps): JSX.Element => {
             setKeySize(parseInt(e.target.value) as 128 | 256);
           }}
           action={{
-            icon: <ArrowPathIcon className="h-4" />,
+            icon: <RefreshCwIcon size={16} />,
             action: () => {
               const key = new Uint8Array(keySize / 8);
               crypto.getRandomValues(key);
@@ -159,18 +130,14 @@ export const Channel = ({ channel }: SettingsPanelProps): JSX.Element => {
         >
           <option value={128}>128 Bit</option>
           <option value={256}>256 Bit</option>
-        </Select>
+        </Select> */}
         <Input
           width="100%"
           label="Pre-Shared Key"
           description="Channel key to encrypt data"
           type={pskHidden ? "password" : "text"}
           action={{
-            icon: pskHidden ? (
-              <EyeIcon className="w-4" />
-            ) : (
-              <EyeSlashIcon className="w-4" />
-            ),
+            icon: pskHidden ? <EyeIcon size={16} /> : <EyeOffIcon size={16} />,
             action: () => {
               setPskHidden(!pskHidden);
             }
@@ -202,7 +169,7 @@ export const Channel = ({ channel }: SettingsPanelProps): JSX.Element => {
             />
           )}
         />
-      </Form>
+      </form>
     </div>
   );
 };

src/components/PageComponents/Config/Bluetooth.tsx

@@ -1,30 +1,12 @@
-import { useEffect } from "react";
-import { Controller, useForm, useWatch } from "react-hook-form";
-import { Input } from "@components/form/Input.js";
-import { Select } from "@components/form/Select.js";
-import { Toggle } from "@components/form/Toggle.js";
-import { BluetoothValidation } from "@app/validation/config/bluetooth.js";
-import { Form } from "@components/form/Form";
-import { useDevice } from "@core/providers/useDevice.js";
-import { renderOptions } from "@core/utils/selectEnumOptions.js";
-import { classValidatorResolver } from "@hookform/resolvers/class-validator";
+import type { BluetoothValidation } from "@app/validation/config/bluetooth.js";
+import { useDevice } from "@core/stores/deviceStore.js";
 import { Protobuf } from "@meshtastic/meshtasticjs";
+import { DynamicForm } from "@app/components/DynamicForm.js";
 
 export const Bluetooth = (): JSX.Element => {
   const { config, setWorkingConfig } = useDevice();
 
-  const { register, handleSubmit, control, reset } =
-    useForm<BluetoothValidation>({
-      mode: "onChange",
-      defaultValues: config.bluetooth,
-      resolver: classValidatorResolver(BluetoothValidation)
-    });
-
-  useEffect(() => {
-    reset(config.bluetooth);
-  }, [reset, config.bluetooth]);
-
-  const onSubmit = handleSubmit((data) => {
+  const onSubmit = (data: BluetoothValidation) => {
     setWorkingConfig(
       new Protobuf.Config({
         payloadVariant: {
@@ -33,47 +15,56 @@ export const Bluetooth = (): JSX.Element => {
         }
       })
     );
-  });
-
-  const pairingMode = useWatch({
-    control,
-    name: "mode",
-    defaultValue: Protobuf.Config_BluetoothConfig_PairingMode.RANDOM_PIN
-  });
+  };
 
   return (
-    <Form onSubmit={onSubmit}>
-      <Controller
-        name="enabled"
-        control={control}
-        render={({ field: { value, ...rest } }) => (
-          <Toggle
-            label="Enabled"
-            description="Enable or disable Bluetooth"
-            checked={value}
-            {...rest}
-          />
-        )}
-      />
-      <Select
-        label="Pairing mode"
-        description="Pin selection behaviour."
-        {...register("mode", { valueAsNumber: true })}
-      >
-        {renderOptions(Protobuf.Config_BluetoothConfig_PairingMode)}
-      </Select>
-
-      <Input
-        disabled={
-          pairingMode !== Protobuf.Config_BluetoothConfig_PairingMode.FIXED_PIN
+    <DynamicForm<BluetoothValidation>
+      onSubmit={onSubmit}
+      defaultValues={config.bluetooth}
+      fieldGroups={[
+        {
+          label: "Bluetooth Settings",
+          description: "Settings for the Bluetooth module",
+          fields: [
+            {
+              type: "toggle",
+              name: "enabled",
+              label: "Enabled",
+              description: "Enable or disable Bluetooth"
+            },
+            {
+              type: "select",
+              name: "mode",
+              label: "Pairing mode",
+              description: "Pin selection behaviour.",
+              enumValue: Protobuf.Config_BluetoothConfig_PairingMode,
+              formatEnumName: true,
+              disabledBy: [
+                {
+                  fieldName: "enabled"
+                }
+              ]
+            },
+            {
+              type: "number",
+              name: "fixedPin",
+              label: "Pin",
+              description: "Pin to use when pairing",
+              disabledBy: [
+                {
+                  fieldName: "mode",
+                  selector:
+                    Protobuf.Config_BluetoothConfig_PairingMode.FIXED_PIN,
+                  invert: true
+                },
+                {
+                  fieldName: "enabled"
+                }
+              ]
+            }
+          ]
         }
-        label="Pin"
-        description="Pin to use when pairing"
-        type="number"
-        {...register("fixedPin", {
-          valueAsNumber: true
-        })}
-      />
-    </Form>
+      ]}
+    />
   );
 };

src/components/PageComponents/Config/Device.tsx

@@ -1,28 +1,12 @@
-import { useEffect } from "react";
-import { Controller, useForm } from "react-hook-form";
-import { Input } from "@components/form/Input.js";
-import { Select } from "@components/form/Select.js";
-import { Toggle } from "@components/form/Toggle.js";
-import { DeviceValidation } from "@app/validation/config/device.js";
-import { Form } from "@components/form/Form";
-import { useDevice } from "@core/providers/useDevice.js";
-import { renderOptions } from "@core/utils/selectEnumOptions.js";
-import { classValidatorResolver } from "@hookform/resolvers/class-validator";
+import type { DeviceValidation } from "@app/validation/config/device.js";
+import { useDevice } from "@core/stores/deviceStore.js";
 import { Protobuf } from "@meshtastic/meshtasticjs";
+import { DynamicForm } from "@app/components/DynamicForm.js";
 
 export const Device = (): JSX.Element => {
   const { config, setWorkingConfig } = useDevice();
-  const { register, handleSubmit, control, reset } = useForm<DeviceValidation>({
-    mode: "onChange",
-    defaultValues: config.device,
-    resolver: classValidatorResolver(DeviceValidation)
-  });
 
-  useEffect(() => {
-    reset(config.device);
-  }, [reset, config.device]);
-
-  const onSubmit = handleSubmit((data) => {
+  const onSubmit = (data: DeviceValidation) => {
     setWorkingConfig(
       new Protobuf.Config({
         payloadVariant: {
@@ -31,53 +15,68 @@ export const Device = (): JSX.Element => {
         }
       })
     );
-  });
+  };
 
   return (
-    <Form onSubmit={onSubmit}>
-      <Select
-        label="Role"
-        description="What role the device performs on the mesh"
-        {...register("role", { valueAsNumber: true })}
-      >
-        {renderOptions(Protobuf.Config_DeviceConfig_Role)}
-      </Select>
-      <Controller
-        name="serialEnabled"
-        control={control}
-        render={({ field: { value, ...rest } }) => (
-          <Toggle
-            label="Serial Output Enabled"
-            description="Disable the device's serial console"
-            checked={value}
-            {...rest}
-          />
-        )}
-      />
-      <Controller
-        name="debugLogEnabled"
-        control={control}
-        render={({ field: { value, ...rest } }) => (
-          <Toggle
-            label="Enabled Debug Log"
-            description="Output debugging information to the device's serial port (auto disables when serial client is connected)"
-            checked={value}
-            {...rest}
-          />
-        )}
-      />
-      <Input
-        label="Button Pin"
-        description="Button pin override"
-        type="number"
-        {...register("buttonGpio", { valueAsNumber: true })}
-      />
-      <Input
-        label="Buzzer Pin"
-        description="Buzzer pin override"
-        type="number"
-        {...register("buzzerGpio", { valueAsNumber: true })}
-      />
-    </Form>
+    <DynamicForm<DeviceValidation>
+      onSubmit={onSubmit}
+      defaultValues={config.device}
+      fieldGroups={[
+        {
+          label: "Device Settings",
+          description: "Settings for the device",
+          fields: [
+            {
+              type: "select",
+              name: "role",
+              label: "Role",
+              description: "What role the device performs on the mesh",
+              enumValue: Protobuf.Config_DeviceConfig_Role,
+              formatEnumName: true
+            },
+            {
+              type: "toggle",
+              name: "serialEnabled",
+              label: "Serial Output Enabled",
+              description: "Disable the device's serial console"
+            },
+            {
+              type: "toggle",
+              name: "debugLogEnabled",
+              label: "Enabled Debug Log",
+              description:
+                "Output debugging information to the device's serial port (auto disables when serial client is connected)"
+            },
+            {
+              type: "number",
+              name: "buttonGpio",
+              label: "Button Pin",
+              description: "Button pin override"
+            },
+            {
+              type: "number",
+              name: "buzzerGpio",
+              label: "Buzzer Pin",
+              description: "Buzzer pin override"
+            },
+            {
+              type: "select",
+              name: "rebroadcastMode",
+              label: "Rebroadcast Mode",
+              description: "How to handle rebroadcasting",
+              enumValue: Protobuf.Config_DeviceConfig_RebroadcastMode,
+              formatEnumName: true
+            },
+            {
+              type: "number",
+              name: "nodeInfoBroadcastSecs",
+              label: "Node Info Broadcast Interval",
+              description: "How often to broadcast node info",
+              suffix: "Seconds"
+            }
+          ]
+        }
+      ]}
+    />
   );
 };

src/components/PageComponents/Config/Display.tsx

@@ -1,30 +1,12 @@
-import { useEffect } from "react";
-import { Controller, useForm } from "react-hook-form";
-import { Input } from "@components/form/Input.js";
-import { Select } from "@components/form/Select.js";
-import { Toggle } from "@components/form/Toggle.js";
-import { DisplayValidation } from "@app/validation/config/display.js";
-import { Form } from "@components/form/Form";
-import { useDevice } from "@core/providers/useDevice.js";
-import { renderOptions } from "@core/utils/selectEnumOptions.js";
-import { classValidatorResolver } from "@hookform/resolvers/class-validator";
+import type { DisplayValidation } from "@app/validation/config/display.js";
+import { useDevice } from "@core/stores/deviceStore.js";
 import { Protobuf } from "@meshtastic/meshtasticjs";
+import { DynamicForm } from "@app/components/DynamicForm.js";
 
 export const Display = (): JSX.Element => {
   const { config, setWorkingConfig } = useDevice();
-  const { register, handleSubmit, reset, control } = useForm<DisplayValidation>(
-    {
-      mode: "onChange",
-      defaultValues: config.display,
-      resolver: classValidatorResolver(DisplayValidation)
-    }
-  );
 
-  useEffect(() => {
-    reset(config.display);
-  }, [reset, config.display]);
-
-  const onSubmit = handleSubmit((data) => {
+  const onSubmit = (data: DisplayValidation) => {
     setWorkingConfig(
       new Protobuf.Config({
         payloadVariant: {
@@ -33,88 +15,80 @@ export const Display = (): JSX.Element => {
         }
       })
     );
-  });
+  };
 
   return (
-    <Form onSubmit={onSubmit}>
-      <Input
-        label="Screen Timeout"
-        description="Turn off the display after this long"
-        suffix="Seconds"
-        type="number"
-        {...register("screenOnSecs", { valueAsNumber: true })}
-      />
-      <Input
-        label="Carousel Delay"
-        description="How fast to cycle through windows"
-        suffix="Seconds"
-        type="number"
-        {...register("autoScreenCarouselSecs", { valueAsNumber: true })}
-      />
-      <Select
-        label="GPS Display Units"
-        description="Coordinate display format"
-        {...register("gpsFormat", { valueAsNumber: true })}
-      >
-        {renderOptions(Protobuf.Config_DisplayConfig_GpsCoordinateFormat)}
-      </Select>
-      <Controller
-        name="compassNorthTop"
-        control={control}
-        render={({ field: { value, ...rest } }) => (
-          <Toggle
-            label="Compass North Top"
-            description="Fix north to the top of compass"
-            checked={value}
-            {...rest}
-          />
-        )}
-      />
-      <Controller
-        name="flipScreen"
-        control={control}
-        render={({ field: { value, ...rest } }) => (
-          <Toggle
-            label="Flip Screen"
-            description="Flip display 180 degrees"
-            checked={value}
-            {...rest}
-          />
-        )}
-      />
-      <Select
-        label="Display Units"
-        description="Display metric or imperial units"
-        {...register("units", { valueAsNumber: true })}
-      >
-        {renderOptions(Protobuf.Config_DisplayConfig_DisplayUnits)}
-      </Select>
-      <Select
-        label="OLED Type"
-        description="Type of OLED screen attached to the device"
-        {...register("oled", { valueAsNumber: true })}
-      >
-        {renderOptions(Protobuf.Config_DisplayConfig_OledType)}
-      </Select>
-      <Select
-        label="Display Mode"
-        description="Screen layout variant"
-        {...register("displaymode", { valueAsNumber: true })}
-      >
-        {renderOptions(Protobuf.Config_DisplayConfig_DisplayMode)}
-      </Select>
-      <Controller
-        name="headingBold"
-        control={control}
-        render={({ field: { value, ...rest } }) => (
-          <Toggle
-            label="Bold Heading"
-            description="Bolden the heading text"
-            checked={value}
-            {...rest}
-          />
-        )}
-      />
-    </Form>
+    <DynamicForm<DisplayValidation>
+      onSubmit={onSubmit}
+      defaultValues={config.display}
+      fieldGroups={[
+        {
+          label: "Display Settings",
+          description: "Settings for the device display",
+          fields: [
+            {
+              type: "number",
+              name: "screenOnSecs",
+              label: "Screen Timeout",
+              description: "Turn off the display after this long"
+            },
+            {
+              type: "select",
+              name: "gpsFormat",
+              label: "GPS Display Units",
+              description: "Coordinate display format",
+              enumValue: Protobuf.Config_DisplayConfig_GpsCoordinateFormat
+            },
+            {
+              type: "number",
+              name: "autoScreenCarouselSecs",
+              label: "Carousel Delay",
+              description: "How fast to cycle through windows"
+            },
+            {
+              type: "toggle",
+              name: "compassNorthTop",
+              label: "Compass North Top",
+              description: "Fix north to the top of compass"
+            },
+            {
+              type: "toggle",
+              name: "flipScreen",
+              label: "Flip Screen",
+              description: "Flip display 180 degrees"
+            },
+            {
+              type: "select",
+              name: "units",
+              label: "Display Units",
+              description: "Display metric or imperial units",
+              enumValue: Protobuf.Config_DisplayConfig_DisplayUnits,
+              formatEnumName: true
+            },
+            {
+              type: "select",
+              name: "oled",
+              label: "OLED Type",
+              description: "Type of OLED screen attached to the device",
+              enumValue: Protobuf.Config_DisplayConfig_OledType
+            },
+            {
+              type: "select",
+              name: "displaymode",
+              label: "Display Mode",
+              description: "Screen layout variant",
+              enumValue: Protobuf.Config_DisplayConfig_DisplayMode,
+              formatEnumName: true
+            },
+            {
+              type: "toggle",
+              name: "headingBold",
+              label: "Bold Heading",
+              description: "Bolden the heading text"
+            }
+          ]
+        }
+      ]}
+    />
   );
 };

src/components/PageComponents/Config/LoRa.tsx

@@ -1,36 +1,12 @@
-import { useEffect } from "react";
-import { Controller, useForm, useWatch } from "react-hook-form";
-import { FormSection } from "@components/form/FormSection.js";
-import { Input } from "@components/form/Input.js";
-import { Select } from "@components/form/Select.js";
-import { Toggle } from "@components/form/Toggle.js";
-import { LoRaValidation } from "@app/validation/config/lora.js";
-import { Form } from "@components/form/Form";
-import { useDevice } from "@core/providers/useDevice.js";
-import { renderOptions } from "@core/utils/selectEnumOptions.js";
-import { classValidatorResolver } from "@hookform/resolvers/class-validator";
+import type { LoRaValidation } from "@app/validation/config/lora.js";
+import { useDevice } from "@core/stores/deviceStore.js";
 import { Protobuf } from "@meshtastic/meshtasticjs";
+import { DynamicForm } from "@app/components/DynamicForm.js";
 
 export const LoRa = (): JSX.Element => {
   const { config, setWorkingConfig } = useDevice();
 
-  const { register, handleSubmit, control, reset } = useForm<LoRaValidation>({
-    mode: "onChange",
-    defaultValues: config.lora,
-    resolver: classValidatorResolver(LoRaValidation)
-  });
-
-  const usePreset = useWatch({
-    control,
-    name: "usePreset",
-    defaultValue: true
-  });
-
-  useEffect(() => {
-    reset(config.lora);
-  }, [reset, config.lora]);
-
-  const onSubmit = handleSubmit((data) => {
+  const onSubmit = (data: LoRaValidation) => {
     setWorkingConfig(
       new Protobuf.Config({
         payloadVariant: {
@@ -39,121 +15,148 @@ export const LoRa = (): JSX.Element => {
         }
       })
     );
-  });
+  };
 
   return (
-    <Form onSubmit={onSubmit}>
-      <FormSection title="Modem Settings">
-        <Controller
-          name="usePreset"
-          control={control}
-          render={({ field: { value, ...rest } }) => (
-            <Toggle
-              label="Use Preset"
-              description="Use one of the predefined modem presets"
-              checked={value}
-              {...rest}
-            />
-          )}
-        />
-        {usePreset ? (
-          <Select
-            label="Preset"
-            description="Modem preset to use"
-            {...register("modemPreset", { valueAsNumber: true })}
-          >
-            {renderOptions(Protobuf.Config_LoRaConfig_ModemPreset)}
-          </Select>
-        ) : (
-          <>
-            <Input
-              label="Bandwidth"
-              description="Channel bandwidth in MHz"
-              type="number"
-              suffix="MHz"
-              {...register("bandwidth", {
-                valueAsNumber: true
-              })}
-            />
-            <Input
-              label="Spread Factor"
-              description="Indicates the number of chirps per symbol"
-              type="number"
-              suffix="CPS"
-              {...register("spreadFactor", {
-                valueAsNumber: true
-              })}
-            />
-            <Input
-              label="Coding Rate"
-              description="The denominator of the coding rate"
-              type="number"
-              {...register("codingRate", {
-                valueAsNumber: true
-              })}
-            />
-          </>
-        )}
-      </FormSection>
-      <FormSection title="Radio Settings">
-        <Controller
-          name="txEnabled"
-          control={control}
-          render={({ field: { value, ...rest } }) => (
-            <Toggle
-              label="Transmit Enabled"
-              description="Enable/Disable transmit (TX) from the LoRa radio"
-              checked={value}
-              {...rest}
-            />
-          )}
-        />
-        <Select
-          label="Region"
-          description="Sets the region for your node"
-          {...register("region", { valueAsNumber: true })}
-        >
-          {renderOptions(Protobuf.Config_LoRaConfig_RegionCode)}
-        </Select>
-        <Input
-          label="Transmit Power"
-          description="Max transmit power in dBm"
-          type="number"
-          {...register("txPower", { valueAsNumber: true })}
-        />
-        <Input
-          label="Channel Number"
-          description="LoRa channel number"
-          type="number"
-          {...register("channelNum", { valueAsNumber: true })}
-        />
-        <Input
-          label="Frequency Offset"
-          description="Frequency offset to correct for crystal calibration errors"
-          suffix="Hz"
-          type="number"
-          {...register("frequencyOffset", { valueAsNumber: true })}
-        />
-        <Controller
-          name="overrideDutyCycle"
-          control={control}
-          render={({ field: { value, ...rest } }) => (
-            <Toggle
-              label="Override Duty Cycle"
-              description="Description"
-              checked={value}
-              {...rest}
-            />
-          )}
-        />
-      </FormSection>
-      <Input
-        label="Hop Limit"
-        description="Maximum number of hops"
-        suffix="Hops"
-        type="number"
-        {...register("hopLimit", { valueAsNumber: true })}
-      />
-    </Form>
+    <DynamicForm<LoRaValidation>
+      onSubmit={onSubmit}
+      defaultValues={config.lora}
+      fieldGroups={[
+        {
+          label: "Mesh Settings",
+          description: "Settings for the LoRa mesh",
+          fields: [
+            {
+              type: "select",
+              name: "region",
+              label: "Region",
+              description: "Sets the region for your node",
+              enumValue: Protobuf.Config_LoRaConfig_RegionCode
+            },
+            {
+              type: "number",
+              name: "hopLimit",
+              label: "Hop Limit",
+              description: "Maximum number of hops"
+            },
+            {
+              type: "number",
+              name: "channelNum",
+              label: "Channel Number",
+              description: "LoRa channel number"
+            }
+          ]
+        },
+        {
+          label: "Waveform Settings",
+          description: "Settings for the LoRa waveform",
+          fields: [
+            {
+              type: "toggle",
+              name: "usePreset",
+              label: "Use Preset",
+              description: "Use one of the predefined modem presets"
+            },
+            {
+              type: "select",
+              name: "modemPreset",
+              label: "Modem Preset",
+              description: "Modem preset to use",
+              enumValue: Protobuf.Config_LoRaConfig_ModemPreset,
+              formatEnumName: true,
+              disabledBy: [
+                {
+                  fieldName: "usePreset"
+                }
+              ]
+            },
+            {
+              type: "number",
+              name: "bandwidth",
+              label: "Bandwidth",
+              description: "Channel bandwidth in MHz",
+              suffix: "MHz",
+              disabledBy: [
+                {
+                  fieldName: "usePreset",
+                  invert: true
+                }
+              ]
+            },
+            {
+              type: "number",
+              name: "spreadFactor",
+              label: "Spreading Factor",
+              description: "Indicates the number of chirps per symbol",
+              suffix: "CPS",
+              disabledBy: [
+                {
+                  fieldName: "usePreset",
+                  invert: true
+                }
+              ]
+            },
+            {
+              type: "number",
+              name: "codingRate",
+              label: "Coding Rate",
+              description: "The denominator of the coding rate",
+              disabledBy: [
+                {
+                  fieldName: "usePreset",
+                  invert: true
+                }
+              ]
+            }
+          ]
+        },
+        {
+          label: "Radio Settings",
+          description: "Settings for the LoRa radio",
+          fields: [
+            {
+              type: "toggle",
+              name: "txEnabled",
+              label: "Tramsmit Enabled",
+              description: "Enable/Disable transmit (TX) from the LoRa radio"
+            },
+            {
+              type: "number",
+              name: "txPower",
+              label: "Transmit Power",
+              description: "Max transmit power",
+              suffix: "dBm"
+            },
+            {
+              type: "toggle",
+              name: "overrideDutyCycle",
+              label: "Override Duty Cycle",
+              description: "Override Duty Cycle"
+            },
+            {
+              type: "number",
+              name: "frequencyOffset",
+              label: "Frequency Offset",
+              description:
+                "Frequency offset to correct for crystal calibration errors",
+              suffix: "Hz"
+            },
+            {
+              type: "toggle",
+              name: "sx126xRxBoostedGain",
+              label: "Boosted RX Gain",
+              description: "Boosted RX gain"
+            },
+            {
+              type: "number",
+              name: "overrideFrequency",
+              label: "Override Frequency",
+              description: "Override frequency",
+              suffix: "Hz"
+            }
+          ]
+        }
+      ]}
+    />
   );
 };

src/components/PageComponents/Config/Network.tsx

@@ -1,51 +1,12 @@
-import { useEffect } from "react";
-import { Controller, useForm, useWatch } from "react-hook-form";
-import { FormSection } from "@components/form/FormSection.js";
-import { Input } from "@components/form/Input.js";
-import { IPInput } from "@components/form/IPInput.js";
-import { Select } from "@components/form/Select.js";
-import { Toggle } from "@components/form/Toggle.js";
-import { renderOptions } from "@core/utils/selectEnumOptions.js";
-import { NetworkValidation } from "@app/validation/config/network.js";
-import { Form } from "@components/form/Form";
-import { useDevice } from "@core/providers/useDevice.js";
-import { ErrorMessage } from "@hookform/error-message";
-import { classValidatorResolver } from "@hookform/resolvers/class-validator";
+import type { NetworkValidation } from "@app/validation/config/network.js";
+import { useDevice } from "@core/stores/deviceStore.js";
 import { Protobuf } from "@meshtastic/meshtasticjs";
+import { DynamicForm } from "@app/components/DynamicForm.js";
 
 export const Network = (): JSX.Element => {
   const { config, setWorkingConfig } = useDevice();
-  const { register, handleSubmit, control, reset } = useForm<NetworkValidation>(
-    {
-      mode: "onChange",
-      defaultValues: config.network,
-      resolver: classValidatorResolver(NetworkValidation)
-    }
-  );
 
-  const wifiEnabled = useWatch({
-    control,
-    name: "wifiEnabled",
-    defaultValue: false
-  });
-
-  const ethEnabled = useWatch({
-    control,
-    name: "ethEnabled",
-    defaultValue: false
-  });
-
-  const ethMode = useWatch({
-    control,
-    name: "addressMode",
-    defaultValue: Protobuf.Config_NetworkConfig_AddressMode.DHCP
-  });
-
-  useEffect(() => {
-    reset(config.network);
-  }, [reset, config.network]);
-
-  const onSubmit = handleSubmit((data) => {
+  const onSubmit = (data: NetworkValidation) => {
     setWorkingConfig(
       new Protobuf.Config({
         payloadVariant: {
@@ -54,97 +15,143 @@ export const Network = (): JSX.Element => {
         }
       })
     );
-  });
+  };
 
   return (
-    <Form onSubmit={onSubmit}>
-      <FormSection title="WiFi Config">
-        <Controller
-          name="wifiEnabled"
-          control={control}
-          render={({ field: { value, ...rest } }) => (
-            <Toggle
-              label="Enabled"
-              description="Enable or disable the WiFi radio"
-              checked={value}
-              {...rest}
-            />
-          )}
-        />
-        <Input
-          label="SSID"
-          description="Network name"
-          disabled={!wifiEnabled}
-          {...register("wifiSsid", { disabled: !wifiEnabled })}
-        />
-        <Input
-          label="PSK"
-          type="password"
-          description="Network password"
-          disabled={!wifiEnabled}
-          {...register("wifiPsk", { disabled: !wifiEnabled })}
-        />
-      </FormSection>
-      <FormSection title="Ethernet Config">
-        <Controller
-          name="ethEnabled"
-          control={control}
-          render={({ field: { value, ...rest } }) => (
-            <Toggle
-              label="Enabled"
-              description="Enable or disbale the Ethernet port"
-              checked={value}
-              {...rest}
-            />
-          )}
-        />
-      </FormSection>
-      <FormSection title="IP Config">
-        <Select
-          label="Address Mode"
-          description="Address assignment selection"
-          disabled={!(ethEnabled || wifiEnabled)}
-          {...register("addressMode", {
-            valueAsNumber: true
-          })}
-        >
-          {renderOptions(Protobuf.Config_NetworkConfig_AddressMode)}
-        </Select>
-        {ethMode === Protobuf.Config_NetworkConfig_AddressMode.STATIC && (
-          <>
-            <IPInput
-              label="IP"
-              description="IP Address"
-              {...register("ipv4Config.ip", { valueAsNumber: true })}
-            />
-            <IPInput
-              label="Gateway"
-              description="Default Gateway"
-              {...register("ipv4Config.gateway", { valueAsNumber: true })}
-            />
-            <IPInput
-              label="Subnet"
-              description="Subnet Mask"
-              {...register("ipv4Config.subnet", { valueAsNumber: true })}
-            />
-            <IPInput
-              label="DNS"
-              description="DNS Server"
-              {...register("ipv4Config.dns", { valueAsNumber: true })}
-            />
-          </>
-        )}
-      </FormSection>
-      <Input
-        label="NTP Server"
-        description="NTP server for time synchronization"
-        {...register("ntpServer")}
-      />
-      <Input
-        label="Rsyslog Server"
-        description="Rsyslog server for external logging"
-        {...register("rsyslogServer")}
-      />
-    </Form>
+    <DynamicForm<NetworkValidation>
+      onSubmit={onSubmit}
+      defaultValues={config.network}
+      fieldGroups={[
+        {
+          label: "WiFi Config",
+          description: "WiFi radio configuration",
+          fields: [
+            {
+              type: "toggle",
+              name: "wifiEnabled",
+              label: "Enabled",
+              description: "Enable or disable the WiFi radio"
+            },
+            {
+              type: "text",
+              name: "wifiSsid",
+              label: "SSID",
+              description: "Network name",
+              disabledBy: [
+                {
+                  fieldName: "wifiEnabled"
+                }
+              ]
+            },
+            {
+              type: "password",
+              name: "wifiPsk",
+              label: "PSK",
+              description: "Network password",
+              disabledBy: [
+                {
+                  fieldName: "wifiEnabled"
+                }
+              ]
+            }
+          ]
+        },
+        {
+          label: "Ethernet Config",
+          description: "Ethernet port configuration",
+          fields: [
+            {
+              type: "toggle",
+              name: "ethEnabled",
+              label: "Enabled",
+              description: "Enable or disable the Ethernet port"
+            }
+          ]
+        },
+        {
+          label: "IP Config",
+          description: "IP configuration",
+          fields: [
+            {
+              type: "select",
+              name: "addressMode",
+              label: "Address Mode",
+              description: "Address assignment selection",
+              enumValue: Protobuf.Config_NetworkConfig_AddressMode
+            },
+            {
+              type: "text",
+              name: "ipv4Config.ip",
+              label: "IP",
+              description: "IP Address",
+              disabledBy: [
+                {
+                  fieldName: "addressMode",
+                  selector: Protobuf.Config_NetworkConfig_AddressMode.DHCP
+                }
+              ]
+            },
+            {
+              type: "text",
+              name: "ipv4Config.gateway",
+              label: "Gateway",
+              description: "Default Gateway",
+              disabledBy: [
+                {
+                  fieldName: "addressMode",
+                  selector: Protobuf.Config_NetworkConfig_AddressMode.DHCP
+                }
+              ]
+            },
+            {
+              type: "text",
+              name: "ipv4Config.subnet",
+              label: "Subnet",
+              description: "Subnet Mask",
+              disabledBy: [
+                {
+                  fieldName: "addressMode",
+                  selector: Protobuf.Config_NetworkConfig_AddressMode.DHCP
+                }
+              ]
+            },
+            {
+              type: "text",
+              name: "ipv4Config.dns",
+              label: "DNS",
+              description: "DNS Server",
+              disabledBy: [
+                {
+                  fieldName: "addressMode",
+                  selector: Protobuf.Config_NetworkConfig_AddressMode.DHCP
+                }
+              ]
+            }
+          ]
+        },
+        {
+          label: "NTP Config",
+          description: "NTP configuration",
+          fields: [
+            {
+              type: "text",
+              name: "ntpServer",
+              label: "NTP Server"
+            }
+          ]
+        },
+        {
+          label: "Rsyslog Config",
+          description: "Rsyslog configuration",
+          fields: [
+            {
+              type: "text",
+              name: "rsyslogServer",
+              label: "Rsyslog Server"
+            }
+          ]
+        }
+      ]}
+    />
   );
 };

src/components/PageComponents/Config/Position.tsx

@@ -1,230 +1,97 @@
-import { useEffect } from "react";
-import { Controller, useForm, useWatch } from "react-hook-form";
-import { BitwiseSelect } from "@components/form/BitwiseSelect.js";
-import { FormSection } from "@components/form/FormSection.js";
-import { Input } from "@components/form/Input.js";
-import { Toggle } from "@components/form/Toggle.js";
-import { PositionValidation } from "@app/validation/config/position.js";
-import { Form } from "@components/form/Form";
-import { useDevice } from "@core/providers/useDevice.js";
-import { classValidatorResolver } from "@hookform/resolvers/class-validator";
+import type { PositionValidation } from "@app/validation/config/position.js";
+import { useDevice } from "@core/stores/deviceStore.js";
 import { Protobuf } from "@meshtastic/meshtasticjs";
+import { DynamicForm } from "@app/components/DynamicForm.js";
 
 export const Position = (): JSX.Element => {
   const { config, nodes, hardware, setWorkingConfig } = useDevice();
 
-  const myNode = nodes.find((n) => n.data.num === hardware.myNodeNum);
-
-  const { register, handleSubmit, reset, control } =
-    useForm<PositionValidation>({
-      mode: "onChange",
-      defaultValues: {
-        fixedAlt: myNode?.data.position?.altitude,
-        fixedLat: (myNode?.data.position?.latitudeI ?? 0) / 1e7,
-        fixedLng: (myNode?.data.position?.longitudeI ?? 0) / 1e7,
-        ...config.position
-      },
-      resolver: classValidatorResolver(PositionValidation)
-    });
-
-  const fixedPositionEnabled = useWatch({
-    control,
-    name: "fixedPosition",
-    defaultValue: false
-  });
-
-  useEffect(() => {
-    reset({
-      fixedAlt: myNode?.data.position?.altitude,
-      fixedLat: (myNode?.data.position?.latitudeI ?? 0) / 1e7,
-      fixedLng: (myNode?.data.position?.longitudeI ?? 0) / 1e7,
-      ...config.position
-    });
-  }, [reset, config.position, myNode?.data.position]);
-
-  const onSubmit = handleSubmit((data) => {
-    const { fixedAlt, fixedLat, fixedLng, ...rest } = data;
-
-    const configHasChanged = !Protobuf.Config_PositionConfig.equals(
-      config.position,
-      new Protobuf.Config_PositionConfig(rest)
-    );
-
+  const onSubmit = (data: PositionValidation) => {
     setWorkingConfig(
       new Protobuf.Config({
         payloadVariant: {
           case: "position",
-          value: rest
+          value: data
         }
       })
     );
-
-    // if (connection) {
-    //   void toast.promise(
-    //     connection
-    //       .setPosition(
-    //         new Protobuf.Position({
-    //           altitude: fixedAlt,
-    //           latitudeI: fixedLat * 1e7,
-    //           longitudeI: fixedLng * 1e7
-    //         })
-    //       )
-    //       .then(() => reset({ ...data })),
-    //     {
-    //       loading: "Saving...",
-    //       success: "Saved Position Config, Restarting Node",
-    //       error: "No response received"
-    //     }
-    //   );
-    //   if (configHasChanged) {
-    //     void toast.promise(
-    //       connection
-    //         .setConfig(
-    //           new Protobuf.Config({
-    //             payloadVariant: {
-    //               case: "position",
-    //               value: rest
-    //             }
-    //           })
-    //         )
-    //         .then(() =>
-    //           setConfig(
-    //             new Protobuf.Config({
-    //               payloadVariant: {
-    //                 case: "position",
-    //                 value: rest
-    //               }
-    //             })
-    //           )
-    //         ),
-    //       {
-    //         loading: "Saving...",
-    //         success: "Saved Position Config, Restarting Node",
-    //         error: "No response received"
-    //       }
-    //     );
-    //   }
-    // }
-  });
+  };
 
   return (
-    <Form onSubmit={onSubmit}>
-      <Controller
-        name="gpsEnabled"
-        control={control}
-        render={({ field: { value, ...rest } }) => (
-          <Toggle
-            label="GPS Enabled"
-            description="Enable the internal GPS module"
-            checked={value}
-            {...rest}
-          />
-        )}
-      />
-      <Controller
-        name="positionBroadcastSmartEnabled"
-        control={control}
-        render={({ field: { value, ...rest } }) => (
-          <Toggle
-            label="Enable Smart Position"
-            description="Only send position when there has been a meaningful change in location"
-            checked={value}
-            {...rest}
-          />
-        )}
-      />
-      <Controller
-        name="positionFlags"
-        control={control}
-        render={({ field, fieldState }): JSX.Element => {
-          const { value, onChange } = field;
-          const { error } = fieldState;
-
-          return (
-            <BitwiseSelect
-              label="Position Flags"
-              description="Configuration options for POSITION messages"
-              selected={value}
-              decodeEnun={Protobuf.Config_PositionConfig_PositionFlags}
-              onChange={onChange}
-            />
-          );
-        }}
-      />
-      <FormSection title="Fixed Position">
-        <Controller
-          name="fixedPosition"
-          control={control}
-          render={({ field: { value, ...rest } }) => (
-            <Toggle
-              label="Enabled"
-              description="Don't report GPS position, but a manually-specified one"
-              checked={value}
-              {...rest}
-            />
-          )}
-        />
-        {fixedPositionEnabled && (
-          <>
-            <Input
-              suffix="m"
-              label="Altitude"
-              type="number"
-              disabled={!fixedPositionEnabled}
-              {...register("fixedAlt", { valueAsNumber: true })}
-            />
-            <Input
-              suffix="°"
-              label="Latitude"
-              type="number"
-              disabled={!fixedPositionEnabled}
-              {...register("fixedLat", { valueAsNumber: true })}
-            />
-            <Input
-              suffix="°"
-              label="Longitude"
-              type="number"
-              disabled={!fixedPositionEnabled}
-              {...register("fixedLng", { valueAsNumber: true })}
-            />
-          </>
-        )}
-      </FormSection>
-      <FormSection title="Intervals">
-        <Input
-          suffix="Seconds"
-          label="Broadcast Interval"
-          description="How often your position is sent out over the mesh"
-          type="number"
-          {...register("positionBroadcastSecs", { valueAsNumber: true })}
-        />
-        <Input
-          suffix="Seconds"
-          label="GPS Update Interval"
-          description="How often a GPS fix should be acquired"
-          type="number"
-          {...register("gpsUpdateInterval", { valueAsNumber: true })}
-        />
-        <Input
-          suffix="Seconds"
-          label="Fix Attempt Duration"
-          description="How long the device will try to get a fix for"
-          type="number"
-          {...register("gpsAttemptTime", { valueAsNumber: true })}
-        />
-      </FormSection>
-      <Input
-        label="RX Pin"
-        description="GPS Module RX pin override"
-        type="number"
-        {...register("rxGpio", { valueAsNumber: true })}
-      />
-      <Input
-        label="TX Pin"
-        description="GPS Module TX pin override"
-        type="number"
-        {...register("txGpio", { valueAsNumber: true })}
-      />
-    </Form>
+    <DynamicForm<PositionValidation>
+      onSubmit={onSubmit}
+      defaultValues={config.position}
+      fieldGroups={[
+        {
+          label: "Position settings",
+          description: "Settings for the position module",
+          fields: [
+            {
+              type: "toggle",
+              name: "positionBroadcastSmartEnabled",
+              label: "Enable Smart Position",
+              description:
+                "Only send position when there has been a meaningful change in location"
+            },
+            {
+              type: "toggle",
+              name: "fixedPosition",
+              label: "Fixed Position",
+              description:
+                "Don't report GPS position, but a manually-specified one"
+            },
+            {
+              type: "toggle",
+              name: "gpsEnabled",
+              label: "GPS Enabled",
+              description: "Enable the internal GPS module"
+            },
+            {
+              type: "multiSelect",
+              name: "positionFlags",
+              label: "Position Flags",
+              description: "Configuration options for Position messages",
+              enumValue: Protobuf.Config_PositionConfig_PositionFlags
+            },
+            {
+              type: "number",
+              name: "rxGpio",
+              label: "Receive Pin",
+              description: "GPS Module RX pin override"
+            },
+            {
+              type: "number",
+              name: "txGpio",
+              label: "Transmit Pin",
+              description: "GPS Module TX pin override"
+            }
+          ]
+        },
+        {
+          label: "Intervals",
+          description: "How often to send position updates",
+          fields: [
+            {
+              type: "number",
+              name: "positionBroadcastSecs",
+              label: "Broadcast Interval",
+              description: "How often your position is sent out over the mesh"
+            },
+            {
+              type: "number",
+              name: "gpsUpdateInterval",
+              label: "GPS Update Interval",
+              description: "How often a GPS fix should be acquired"
+            },
+            {
+              type: "number",
+              name: "gpsAttemptTime",
+              label: "Fix Attempt Duration",
+              description: "How long the device will try to get a fix for"
+            }
+          ]
+        }
+      ]}
+    />
   );
 };

src/components/PageComponents/Config/Power.tsx

@@ -1,27 +1,12 @@
-import { useEffect } from "react";
-import { Controller, useForm } from "react-hook-form";
-import { FormSection } from "@components/form/FormSection.js";
-import { Input } from "@components/form/Input.js";
-import { Toggle } from "@components/form/Toggle.js";
-import { PowerValidation } from "@app/validation/config/power.js";
-import { Form } from "@components/form/Form";
-import { useDevice } from "@core/providers/useDevice.js";
-import { classValidatorResolver } from "@hookform/resolvers/class-validator";
+import type { PowerValidation } from "@app/validation/config/power.js";
+import { useDevice } from "@core/stores/deviceStore.js";
 import { Protobuf } from "@meshtastic/meshtasticjs";
+import { DynamicForm } from "@app/components/DynamicForm.js";
 
 export const Power = (): JSX.Element => {
   const { config, setWorkingConfig } = useDevice();
-  const { register, handleSubmit, reset, control } = useForm<PowerValidation>({
-    mode: "onChange",
-    defaultValues: config.power,
-    resolver: classValidatorResolver(PowerValidation)
-  });
 
-  useEffect(() => {
-    reset(config.power);
-  }, [reset, config.power]);
-
-  const onSubmit = handleSubmit((data) => {
+  const onSubmit = (data: PowerValidation) => {
     setWorkingConfig(
       new Protobuf.Config({
         payloadVariant: {
@@ -30,72 +15,86 @@ export const Power = (): JSX.Element => {
         }
       })
     );
-  });
+  };
 
   return (
-    <Form onSubmit={onSubmit}>
-      <Input
-        label="Shutdown on battery delay"
-        description="Automatically shutdown node after this long when on battery, 0 for indefinite"
-        suffix="Seconds"
-        type="number"
-        {...register("onBatteryShutdownAfterSecs", { valueAsNumber: true })}
-      />
-      <Controller
-        name="isPowerSaving"
-        control={control}
-        render={({ field: { value, ...rest } }) => (
-          <Toggle
-            label="Enable power saving mode"
-            description="Select if powered from a low-current source (i.e. solar), to minimize power consumption as much as possible."
-            checked={value}
-            {...rest}
-          />
-        )}
-      />
-      <Input
-        label="ADC Multiplier Override ratio"
-        description="Used for tweaking battery voltage reading"
-        type="number"
-        {...register("adcMultiplierOverride", { valueAsNumber: true })}
-      />
-      <FormSection title="Sleep Settings">
-        <Input
-          label="Minimum Wake Time"
-          description="Minimum amount of time the device will stay awake for after receiving a packet"
-          suffix="Seconds"
-          type="number"
-          {...register("minWakeSecs", { valueAsNumber: true })}
-        />
-        <Input
-          label="Mesh SDS Timeout"
-          description="The device will enter super deep sleep after this time"
-          suffix="Seconds"
-          type="number"
-          {...register("meshSdsTimeoutSecs", { valueAsNumber: true })}
-        />
-        <Input
-          label="Super Deep Sleep Duration"
-          description="How long the device will be in super deep sleep for"
-          suffix="Seconds"
-          type="number"
-          {...register("sdsSecs", { valueAsNumber: true })}
-        />
-        <Input
-          label="Light Sleep Duration"
-          description="How long the device will be in light sleep for"
-          suffix="Seconds"
-          type="number"
-          {...register("lsSecs", { valueAsNumber: true })}
-        />
-      </FormSection>
-      <Input
-        label="No Connection Bluetooth Disabled"
-        description="If the device does not receive a Bluetooth connection, the BLE radio will be disabled after this long"
-        suffix="Seconds"
-        type="number"
-        {...register("waitBluetoothSecs", { valueAsNumber: true })}
-      />
-    </Form>
+    <DynamicForm<PowerValidation>
+      onSubmit={onSubmit}
+      defaultValues={config.power}
+      fieldGroups={[
+        {
+          label: "Power Config",
+          description: "Settings for the power module",
+          fields: [
+            {
+              type: "toggle",
+              name: "isPowerSaving",
+              label: "Enable power saving mode",
+              description:
+                "Select if powered from a low-current source (i.e. solar), to minimize power consumption as much as possible."
+            },
+            {
+              type: "number",
+              name: "onBatteryShutdownAfterSecs",
+              label: "Shutdown on battery delay",
+              description:
+                "Automatically shutdown node after this long when on battery, 0 for indefinite",
+              suffix: "Seconds"
+            },
+            {
+              type: "number",
+              name: "adcMultiplierOverride",
+              label: "ADC Multiplier Override ratio",
+              description: "Used for tweaking battery voltage reading"
+            },
+            {
+              type: "number",
+              name: "waitBluetoothSecs",
+              label: "No Connection Bluetooth Disabled",
+              description:
+                "If the device does not receive a Bluetooth connection, the BLE radio will be disabled after this long",
+              suffix: "Seconds"
+            }
+          ]
+        },
+        {
+          label: "Sleep Settings",
+          description: "Sleep settings for the power module",
+          fields: [
+            {
+              type: "number",
+              name: "meshSdsTimeoutSecs",
+              label: "Mesh SDS Timeout",
+              description:
+                "The device will enter super deep sleep after this time",
+              suffix: "Seconds"
+            },
+            {
+              type: "number",
+              name: "sdsSecs",
+              label: "Super Deep Sleep Duration",
+              description:
+                "How long the device will be in super deep sleep for",
+              suffix: "Seconds"
+            },
+            {
+              type: "number",
+              name: "lsSecs",
+              label: "Light Sleep Duration",
+              description: "How long the device will be in light sleep for",
+              suffix: "Seconds"
+            },
+            {
+              type: "number",
+              name: "minWakeSecs",
+              label: "Minimum Wake Time",
+              description:
+                "Minimum amount of time the device will stay awake for after receiving a packet",
+              suffix: "Seconds"
+            }
+          ]
+        }
+      ]}
+    />
   );
 };

src/components/PageComponents/Config/User.tsx

@@ -1,105 +0,0 @@
-import { useEffect } from "react";
-import { Controller, useForm } from "react-hook-form";
-import { toast } from "react-hot-toast";
-import { base16 } from "rfc4648";
-import { Input } from "@components/form/Input.js";
-import { Select } from "@components/form/Select.js";
-import { Toggle } from "@components/form/Toggle.js";
-import { UserValidation } from "@app/validation/config/user.js";
-import { Form } from "@components/form/Form";
-import { useDevice } from "@core/providers/useDevice.js";
-import { renderOptions } from "@core/utils/selectEnumOptions.js";
-import { classValidatorResolver } from "@hookform/resolvers/class-validator";
-import { Protobuf } from "@meshtastic/meshtasticjs";
-
-export const User = (): JSX.Element => {
-  const { hardware, nodes, connection } = useDevice();
-
-  const myNode = nodes.find((n) => n.data.num === hardware.myNodeNum);
-
-  const { register, handleSubmit, reset, control } = useForm<UserValidation>({
-    defaultValues: myNode?.data.user,
-    resolver: classValidatorResolver(UserValidation)
-  });
-
-  useEffect(() => {
-    reset({
-      longName: myNode?.data.user?.longName,
-      shortName: myNode?.data.user?.shortName,
-      isLicensed: myNode?.data.user?.isLicensed
-    });
-  }, [reset, myNode]);
-
-  const onSubmit = handleSubmit((data) => {
-    if (connection && myNode?.data.user) {
-      void toast.promise(
-        connection
-          .setOwner(
-            new Protobuf.User({
-              ...myNode.data.user,
-              ...data
-            })
-          )
-          .then(() => reset({ ...data })),
-        {
-          loading: "Saving...",
-          success: "Saved User, Restarting Node",
-          error: "No response received"
-        }
-      );
-    }
-  });
-
-  return (
-    <Form onSubmit={onSubmit}>
-      <Input
-        label="Device Name"
-        description="Personalised name for this device."
-        {...register("longName")}
-      />
-      <Input
-        label="Short Name"
-        description="Shown on small screens."
-        maxLength={4}
-        {...register("shortName")}
-      />
-      <Controller
-        name="isLicensed"
-        control={control}
-        render={({ field: { value, ...rest } }) => (
-          <Toggle
-            label="Licenced Operator?"
-            description="Remove bandwidth restrictions in certain regions (HAM license required)"
-            checked={value}
-            {...rest}
-          />
-        )}
-      />
-      <Input
-        label="Mac Address"
-        description="Hardware address for this node."
-        disabled
-        value={
-          base16
-            .stringify(myNode?.data.user?.macaddr ?? [])
-            .match(/.{1,2}/g)
-            ?.join(":") ?? ""
-        }
-      />
-      <Input
-        label="Device ID"
-        disabled
-        description="Preset unique identifier for this device."
-        value={myNode?.data.user?.id}
-      />
-      <Select
-        label="Hardware"
-        description="Hardware model of this device."
-        disabled
-        value={myNode?.data.user?.hwModel}
-      >
-        {renderOptions(Protobuf.HardwareModel)}
-      </Select>
-    </Form>
-  );
-};

src/components/PageComponents/Connect/BLE.tsx

@@ -1,11 +1,10 @@
 import { useCallback, useEffect, useState } from "react";
 import { Mono } from "@components/generic/Mono.js";
-import { Button } from "@components/form/Button.js";
+import { Button } from "@components/UI/Button.js";
 import { useAppStore } from "@core/stores/appStore.js";
 import { useDeviceStore } from "@core/stores/deviceStore.js";
 import { subscribeAll } from "@core/subscriptions.js";
 import { randId } from "@core/utils/randId.js";
-import { PlusCircleIcon } from "@heroicons/react/24/outline";
 import { Constants, IBLEConnection } from "@meshtastic/meshtasticjs";
 
 export const BLE = (): JSX.Element => {
@@ -64,7 +63,6 @@ export const BLE = (): JSX.Element => {
             });
         }}
       >
-        <PlusCircleIcon className="w-4" />
         <span>New device</span>
       </Button>
     </div>

src/components/PageComponents/Connect/HTTP.tsx

@@ -1,12 +1,11 @@
 import { Controller, useForm, useWatch } from "react-hook-form";
 import { Input } from "@components/form/Input.js";
 import { Toggle } from "@components/form/Toggle.js";
-import { Button } from "@components/form/Button.js";
+import { Button } from "@components/UI/Button.js";
 import { useAppStore } from "@core/stores/appStore.js";
 import { useDeviceStore } from "@core/stores/deviceStore.js";
 import { subscribeAll } from "@core/subscriptions.js";
 import { randId } from "@core/utils/randId.js";
-import { PlusCircleIcon } from "@heroicons/react/24/outline";
 import { IHTTPConnection } from "@meshtastic/meshtasticjs";
 
 export const HTTP = (): JSX.Element => {
@@ -71,8 +70,7 @@ export const HTTP = (): JSX.Element => {
           )}
         />
       </div>
-      <Button type="submit">
-        <PlusCircleIcon className="w-4" />
+      <Button>
         <span>Connect</span>
       </Button>
     </form>

src/components/PageComponents/Connect/Serial.tsx

@@ -1,11 +1,10 @@
 import { useCallback, useEffect, useState } from "react";
 import { Mono } from "@components/generic/Mono.js";
-import { Button } from "@components/form/Button.js";
+import { Button } from "@components/UI/Button.js";
 import { useAppStore } from "@core/stores/appStore.js";
 import { useDeviceStore } from "@core/stores/deviceStore.js";
 import { subscribeAll } from "@core/subscriptions.js";
 import { randId } from "@core/utils/randId.js";
-import { PlusCircleIcon } from "@heroicons/react/24/outline";
 import { ISerialConnection } from "@meshtastic/meshtasticjs";
 
 export const Serial = (): JSX.Element => {
@@ -70,7 +69,6 @@ export const Serial = (): JSX.Element => {
           });
         }}
       >
-        <PlusCircleIcon className="w-4" />
         <span>New device</span>
       </Button>
     </div>

src/components/PageComponents/Map/MapControlls.tsx

@@ -1,77 +0,0 @@
-import { useEffect } from "react";
-
-import { useMap } from "react-map-gl";
-
-import { useDevice } from "@core/providers/useDevice.js";
-import {
-  MagnifyingGlassMinusIcon,
-  MagnifyingGlassPlusIcon,
-  ShareIcon
-} from "@heroicons/react/24/outline";
-import { bbox, lineString } from "@turf/turf";
-
-export const MapControlls = (): JSX.Element => {
-  const { current: map } = useMap();
-  const { nodes } = useDevice();
-
-  const getBBox = () => {
-    const nodesWithPosition = nodes.filter((n) => n.data.position?.latitudeI);
-    if (!nodesWithPosition.length) return;
-    const line = lineString(
-      nodesWithPosition.map((n) => [
-        (n.data.position?.latitudeI ?? 0) / 1e7,
-        (n.data.position?.longitudeI ?? 0) / 1e7
-      ])
-    );
-    const bounds = bbox(line);
-    const center = map?.cameraForBounds(
-      [
-        [bounds[1], bounds[0]],
-        [bounds[3], bounds[2]]
-      ],
-      { padding: { top: 10, bottom: 10, left: 10, right: 10 } }
-    );
-    if (center) map?.easeTo(center);
-    else if (nodesWithPosition.length === 1)
-      map?.easeTo({
-        zoom: 12,
-        center: [
-          (nodesWithPosition[0].data.position?.longitudeI ?? 0) / 1e7,
-          (nodesWithPosition[0].data.position?.latitudeI ?? 0) / 1e7
-        ]
-      });
-  };
-
-  useEffect(() => {
-    getBBox();
-  }, []);
-
-  return (
-    <div className="absolute right-0 top-0 z-10 m-2 ">
-      <div className="divide-y-2 divide-backgroundSecondary overflow-hidden rounded-md bg-backgroundPrimary text-textSecondary">
-        <div
-          className="hover:bg-orange-200 cursor-pointer p-3 hover:text-accent"
-          onClick={() => {
-            map?.zoomIn();
-          }}
-        >
-          <MagnifyingGlassPlusIcon className="h-4 w-4" />
-        </div>
-        <div
-          className="hover:bg-orange-200 cursor-pointer p-3 hover:text-accent"
-          onClick={() => {
-            map?.zoomOut();
-          }}
-        >
-          <MagnifyingGlassMinusIcon className="h-4 w-4" />
-        </div>
-        <div
-          className="hover:bg-orange-200 cursor-pointer p-3 hover:text-accent"
-          onClick={() => getBBox()}
-        >
-          <ShareIcon className="h-4 w-4" />
-        </div>
-      </div>
-    </div>
-  );
-};

src/components/PageComponents/Messages/ChannelChat.tsx

@@ -1,6 +1,6 @@
 import { Message } from "@components/PageComponents/Messages/Message.js";
 import { MessageInput } from "@components/PageComponents/Messages/MessageInput.js";
-import { useDevice } from "@core/providers/useDevice.js";
+import { useDevice } from "@core/stores/deviceStore.js";
 import type { Channel } from "@core/stores/deviceStore.js";
 
 export interface ChannelChatProps {

src/components/PageComponents/Messages/Message.tsx

@@ -1,12 +1,12 @@
 import { WaypointMessage } from "@components/PageComponents/Messages/WaypointMessage.js";
-import { useDevice } from "@core/providers/useDevice.js";
+import { useDevice } from "@core/stores/deviceStore.js";
 import type { AllMessageTypes } from "@core/stores/deviceStore.js";
 import { Hashicon } from "@emeraldpay/hashicon-react";
 import {
-  CheckCircleIcon,
-  EllipsisHorizontalCircleIcon,
-  ExclamationCircleIcon
-} from "@heroicons/react/24/outline";
+  CircleEllipsisIcon,
+  AlertCircleIcon,
+  CheckCircle2Icon
+} from "lucide-react";
 import type { Protobuf } from "@meshtastic/meshtasticjs";
 
 export interface MessageProps {
@@ -30,11 +30,11 @@ export const Message = ({
   return lastMsgSameUser ? (
     <div className="ml-5 flex">
       {message.state === "ack" ? (
-        <CheckCircleIcon className="my-auto h-4 text-textSecondary" />
+        <CheckCircle2Icon size={16} className="my-auto text-textSecondary" />
       ) : message.state === "waiting" ? (
-        <EllipsisHorizontalCircleIcon className="my-auto h-4 text-textSecondary" />
+        <CircleEllipsisIcon size={16} className="my-auto text-textSecondary" />
       ) : (
-        <ExclamationCircleIcon className="my-auto h-4 text-textSecondary" />
+        <AlertCircleIcon size={16} className="my-auto text-textSecondary" />
       )}
       {"waypointID" in message ? (
         <WaypointMessage waypointID={message.waypointID} />
@@ -69,11 +69,14 @@ export const Message = ({
       </div>
       <div className="ml-1 flex">
         {message.state === "ack" ? (
-          <CheckCircleIcon className="my-auto h-4 text-textSecondary" />
+          <CheckCircle2Icon size={16} className="my-auto text-textSecondary" />
         ) : message.state === "waiting" ? (
-          <EllipsisHorizontalCircleIcon className="my-auto h-4 text-textSecondary" />
+          <CircleEllipsisIcon
+            size={16}
+            className="my-auto text-textSecondary"
+          />
         ) : (
-          <ExclamationCircleIcon className="my-auto h-4 text-textSecondary" />
+          <AlertCircleIcon size={16} className="my-auto text-textSecondary" />
         )}
         {"waypointID" in message ? (
           <WaypointMessage waypointID={message.waypointID} />

src/components/PageComponents/Messages/MessageInput.tsx

@@ -1,9 +1,9 @@
-import { IconButton } from "@components/form/IconButton.js";
-import { Input } from "@components/form/Input.js";
-import { useDevice } from "@core/providers/useDevice.js";
+import { Input } from "@components/UI/Input.js";
+import { useDevice } from "@core/stores/deviceStore.js";
 import type { Channel } from "@core/stores/deviceStore.js";
-import { MapPinIcon, PaperAirplaneIcon } from "@heroicons/react/24/outline";
+import { SendIcon } from "lucide-react";
 import type { Types } from "@meshtastic/meshtasticjs";
+import { Button } from "@components/UI/Button.js";
 
 export interface MessageInputProps {
   channel: Channel;
@@ -42,18 +42,16 @@ export const MessageInput = ({ channel }: MessageInputProps): JSX.Element => {
             <Input
               autoFocus
               minLength={2}
-              label=""
               placeholder="Enter Message"
               value={messageDraft}
               onChange={(e) => setMessageDraft(e.target.value)}
             />
           </span>
-          <IconButton
-            icon={<PaperAirplaneIcon className="text-slate-500 h-4" />}
-          />
+          <Button>
+            <SendIcon size={16} />
+          </Button>
         </div>
       </form>
-      <IconButton icon={<MapPinIcon className="text-slate-500 h-4" />} />
     </div>
   );
 };

src/components/PageComponents/Messages/NewLocationMessage.tsx

@@ -1,8 +1,6 @@
 import { Input } from "@components/form/Input.js";
-import { Select } from "@components/form/Select.js";
-import { Button } from "@components/form/Button.js";
-import { useDevice } from "@core/providers/useDevice.js";
-import { renderOptions } from "@core/utils/selectEnumOptions.js";
+import { Button } from "@components/UI/Button.js";
+import { useDevice } from "@core/stores/deviceStore.js";
 import { Protobuf } from "@meshtastic/meshtasticjs";
 
 enum LocationType {
@@ -23,9 +21,9 @@ export const NewLocationMessage = (): JSX.Element => {
       >
         <Input label="Name" />
         <Input label="Description" />
-        <Select label="Type" value={LocationType.MGRS}>
+        {/* <Select label="Type" value={LocationType.MGRS}>
           {renderOptions(LocationType)}
-        </Select>
+        </Select> */}
         <Input label="Coordinates" />
         <Button
           onClick={() => {

src/components/PageComponents/Messages/WaypointMessage.tsx

@@ -1,6 +1,6 @@
-import { useDevice } from "@core/providers/useDevice.js";
+import { useDevice } from "@core/stores/deviceStore.js";
 import { toMGRS } from "@core/utils/toMGRS.js";
-import { MapPinIcon } from "@heroicons/react/24/outline";
+import { MapPinIcon } from "lucide-react";
 
 export interface WaypointMessageProps {
   waypointID: number;
@@ -13,13 +13,13 @@ export const WaypointMessage = ({
   const waypoint = waypoints.find((wp) => wp.id === waypointID);
 
   return (
-    <div className="border-l-slate-200 ml-4 border-l-2 pl-2">
+    <div className="ml-4 border-l-2 border-l-slate-200 pl-2">
       <div className="flex gap-2 rounded-md p-2">
-        <MapPinIcon className="text-slate-600 m-auto w-6" />
+        <MapPinIcon size={16} className="m-auto text-slate-600" />
         <div>
           <div className="flex gap-2">
             <div className="font-bold">{waypoint?.name}</div>
-            <span className="text-slate-500 font-mono text-sm">
+            <span className="font-mono text-sm text-slate-500">
               {toMGRS(waypoint?.latitudeI, waypoint?.longitudeI)}
             </span>
           </div>

src/components/PageComponents/ModuleConfig/Audio.tsx

@@ -1,28 +1,12 @@
-import { useEffect } from "react";
-import { Controller, useForm } from "react-hook-form";
-import { Input } from "@components/form/Input.js";
-import { Select } from "@components/form/Select.js";
-import { Toggle } from "@components/form/Toggle.js";
-import { AudioValidation } from "@app/validation/moduleConfig/audio.js";
-import { Form } from "@components/form/Form";
-import { useDevice } from "@core/providers/useDevice.js";
-import { renderOptions } from "@core/utils/selectEnumOptions.js";
-import { classValidatorResolver } from "@hookform/resolvers/class-validator";
+import type { AudioValidation } from "@app/validation/moduleConfig/audio.js";
+import { useDevice } from "@core/stores/deviceStore.js";
 import { Protobuf } from "@meshtastic/meshtasticjs";
+import { DynamicForm } from "@app/components/DynamicForm.js";
 
 export const Audio = (): JSX.Element => {
   const { moduleConfig, setWorkingModuleConfig } = useDevice();
-  const { register, handleSubmit, reset, control } = useForm<AudioValidation>({
-    mode: "onChange",
-    defaultValues: moduleConfig.audio,
-    resolver: classValidatorResolver(AudioValidation)
-  });
 
-  useEffect(() => {
-    reset(moduleConfig.audio);
-  }, [reset, moduleConfig.audio]);
-
-  const onSubmit = handleSubmit((data) => {
+  const onSubmit = (data: AudioValidation) => {
     setWorkingModuleConfig(
       new Protobuf.ModuleConfig({
         payloadVariant: {
@@ -31,59 +15,63 @@ export const Audio = (): JSX.Element => {
         }
       })
     );
-  });
+  };
 
   return (
-    <Form onSubmit={onSubmit}>
-      <Controller
-        name="codec2Enabled"
-        control={control}
-        render={({ field: { value, ...rest } }) => (
-          <Toggle
-            label="Codec 2 Enabled"
-            description="Enter a description."
-            checked={value}
-            {...rest}
-          />
-        )}
-      />
-      <Input
-        label="PTT Pin"
-        description="Enter a description."
-        type="number"
-        {...register("pttPin", { valueAsNumber: true })}
-      />
-      <Select
-        label="Bitrate"
-        description="Enter a description."
-        {...register("bitrate", { valueAsNumber: true })}
-      >
-        {renderOptions(Protobuf.ModuleConfig_AudioConfig_Audio_Baud)}
-      </Select>
-      <Input
-        label="i2SWs"
-        description="Enter a description."
-        type="number"
-        {...register("i2sWs", { valueAsNumber: true })}
-      />
-      <Input
-        label="i2SSd"
-        description="Enter a description."
-        type="number"
-        {...register("i2sSd", { valueAsNumber: true })}
-      />
-      <Input
-        label="i2SDin"
-        description="Enter a description."
-        type="number"
-        {...register("i2sDin", { valueAsNumber: true })}
-      />
-      <Input
-        label="i2SSck"
-        description="Enter a description."
-        type="number"
-        {...register("i2sSck", { valueAsNumber: true })}
-      />
-    </Form>
+    <DynamicForm<AudioValidation>
+      onSubmit={onSubmit}
+      defaultValues={moduleConfig.audio}
+      fieldGroups={[
+        {
+          label: "Audio Settings",
+          description: "Settings for the Audio module",
+          fields: [
+            {
+              type: "toggle",
+              name: "codec2Enabled",
+              label: "Codec 2 Enabled",
+              description: "Enable Codec 2 audio encoding"
+            },
+            {
+              type: "number",
+              name: "pttPin",
+              label: "PTT Pin",
+              description: "GPIO pin to use for PTT"
+            },
+            {
+              type: "select",
+              name: "bitrate",
+              label: "Bitrate",
+              description: "Bitrate to use for audio encoding",
+              enumValue: Protobuf.ModuleConfig_AudioConfig_Audio_Baud
+            },
+            {
+              type: "number",
+              name: "i2sWs",
+              label: "i2S WS",
+              description: "GPIO pin to use for i2S WS"
+            },
+            {
+              type: "number",
+              name: "i2sSd",
+              label: "i2S SD",
+              description: "GPIO pin to use for i2S SD"
+            },
+            {
+              type: "number",
+              name: "i2sDin",
+              label: "i2S DIN",
+              description: "GPIO pin to use for i2S DIN"
+            },
+            {
+              type: "number",
+              name: "i2sSck",
+              label: "i2S SCK",
+              description: "GPIO pin to use for i2S SCK"
+            }
+          ]
+        }
+      ]}
+    />
   );
 };

src/components/PageComponents/ModuleConfig/CannedMessage.tsx

@@ -1,40 +1,12 @@
-import { useEffect } from "react";
-import { Controller, useForm, useWatch } from "react-hook-form";
-import { Input } from "@components/form/Input.js";
-import { Select } from "@components/form/Select.js";
-import { Toggle } from "@components/form/Toggle.js";
-import { CannedMessageValidation } from "@app/validation/moduleConfig/cannedMessage.js";
-import { Form } from "@components/form/Form";
-import { useDevice } from "@core/providers/useDevice.js";
-import { renderOptions } from "@core/utils/selectEnumOptions.js";
-import { classValidatorResolver } from "@hookform/resolvers/class-validator";
+import type { CannedMessageValidation } from "@app/validation/moduleConfig/cannedMessage.js";
+import { useDevice } from "@core/stores/deviceStore.js";
 import { Protobuf } from "@meshtastic/meshtasticjs";
+import { DynamicForm } from "@app/components/DynamicForm.js";
 
 export const CannedMessage = (): JSX.Element => {
   const { moduleConfig, setWorkingModuleConfig } = useDevice();
-  const {
-    register,
-    handleSubmit,
-    formState: { errors, isDirty },
-    reset,
-    control
-  } = useForm<CannedMessageValidation>({
-    mode: "onChange",
-    defaultValues: moduleConfig.cannedMessage,
-    resolver: classValidatorResolver(CannedMessageValidation)
-  });
 
-  const moduleEnabled = useWatch({
-    control,
-    name: "rotary1Enabled",
-    defaultValue: false
-  });
-
-  useEffect(() => {
-    reset(moduleConfig.cannedMessage);
-  }, [reset, moduleConfig.cannedMessage]);
-
-  const onSubmit = handleSubmit((data) => {
+  const onSubmit = (data: CannedMessageValidation) => {
     setWorkingModuleConfig(
       new Protobuf.ModuleConfig({
         payloadVariant: {
@@ -43,110 +15,87 @@ export const CannedMessage = (): JSX.Element => {
         }
       })
     );
-  });
+  };
 
   return (
-    <Form onSubmit={onSubmit}>
-      <Controller
-        name="enabled"
-        control={control}
-        render={({ field: { value, ...rest } }) => (
-          <Toggle
-            label="Module Enabled"
-            description="Enable canned messages"
-            checked={value}
-            {...rest}
-          />
-        )}
-      />
-      <Controller
-        name="rotary1Enabled"
-        control={control}
-        render={({ field: { value, ...rest } }) => (
-          <Toggle label="Rotary Encoder #1 Enabled" checked={value} {...rest} />
-        )}
-      />
-      <Input
-        label="Encoder Pin A"
-        description="GPIO Pin Value (1-39) For encoder port A"
-        type="number"
-        disabled={moduleEnabled}
-        {...register("inputbrokerPinA", { valueAsNumber: true })}
-      />
-      <Input
-        label="Encoder Pin B"
-        description="GPIO Pin Value (1-39) For encoder port B"
-        type="number"
-        disabled={moduleEnabled}
-        {...register("inputbrokerPinB", { valueAsNumber: true })}
-      />
-      <Input
-        label="Encoder Pin Press"
-        description="GPIO Pin Value (1-39) For encoder Press"
-        type="number"
-        disabled={moduleEnabled}
-        {...register("inputbrokerPinPress", { valueAsNumber: true })}
-      />
-      <Select
-        label="Clockwise event"
-        description="Select input event."
-        disabled={moduleEnabled}
-        {...register("inputbrokerEventCw", { valueAsNumber: true })}
-      >
-        {renderOptions(
-          Protobuf.ModuleConfig_CannedMessageConfig_InputEventChar
-        )}
-      </Select>
-      <Select
-        label="Counter Clockwise event"
-        description="Select input event."
-        disabled={moduleEnabled}
-        {...register("inputbrokerEventCcw", { valueAsNumber: true })}
-      >
-        {renderOptions(
-          Protobuf.ModuleConfig_CannedMessageConfig_InputEventChar
-        )}
-      </Select>
-      <Select
-        label="Press event"
-        description="Select input event"
-        disabled={moduleEnabled}
-        {...register("inputbrokerEventPress", { valueAsNumber: true })}
-      >
-        {renderOptions(
-          Protobuf.ModuleConfig_CannedMessageConfig_InputEventChar
-        )}
-      </Select>
-      <Controller
-        name="updown1Enabled"
-        control={control}
-        render={({ field: { value, ...rest } }) => (
-          <Toggle
-            label="Up Down enabled"
-            description="Enable the up / down encoder"
-            checked={value}
-            {...rest}
-          />
-        )}
-      />
-      <Input
-        label="Allow Input Source"
-        description="Select from: '_any', 'rotEnc1', 'upDownEnc1', 'cardkb'"
-        disabled={moduleEnabled}
-        {...register("allowInputSource")}
-      />
-      <Controller
-        name="sendBell"
-        control={control}
-        render={({ field: { value, ...rest } }) => (
-          <Toggle
-            label="Send Bell"
-            description="Sends a bell character with each message"
-            checked={value}
-            {...rest}
-          />
-        )}
-      />
-    </Form>
+    <DynamicForm<CannedMessageValidation>
+      onSubmit={onSubmit}
+      defaultValues={moduleConfig.mqtt}
+      fieldGroups={[
+        {
+          label: "Canned Message Settings",
+          description: "Settings for the Canned Message module",
+          fields: [
+            {
+              type: "toggle",
+              name: "rotary1Enabled",
+              label: "Rotary Encoder #1 Enabled",
+              description: "Enable the rotary encoder"
+            },
+            {
+              type: "number",
+              name: "inputbrokerPinA",
+              label: "Encoder Pin A",
+              description: "GPIO Pin Value (1-39) For encoder port A"
+            },
+            {
+              type: "number",
+              name: "inputbrokerPinB",
+              label: "Encoder Pin B",
+              description: "GPIO Pin Value (1-39) For encoder port B"
+            },
+            {
+              type: "number",
+              name: "inputbrokerPinPress",
+              label: "Encoder Pin Press",
+              description: "GPIO Pin Value (1-39) For encoder Press"
+            },
+            {
+              type: "select",
+              name: "inputbrokerEventCw",
+              label: "Clockwise event",
+              description: "Select input event.",
+              enumValue:
+                Protobuf.ModuleConfig_CannedMessageConfig_InputEventChar
+            },
+            {
+              type: "select",
+              name: "inputbrokerEventCcw",
+              label: "Counter Clockwise event",
+              description: "Select input event.",
+              enumValue:
+                Protobuf.ModuleConfig_CannedMessageConfig_InputEventChar
+            },
+            {
+              type: "select",
+              name: "inputbrokerEventPress",
+              label: "Press event",
+              description: "Select input event",
+              enumValue:
+                Protobuf.ModuleConfig_CannedMessageConfig_InputEventChar
+            },
+            {
+              type: "toggle",
+              name: "updown1Enabled",
+              label: "Up Down enabled",
+              description: "Enable the up / down encoder"
+            },
+            {
+              type: "text",
+              name: "allowInputSource",
+              label: "Allow Input Source",
+              description:
+                "Select from: '_any', 'rotEnc1', 'upDownEnc1', 'cardkb'"
+            },
+            {
+              type: "toggle",
+              name: "sendBell",
+              label: "Send Bell",
+              description: "Sends a bell character with each message"
+            }
+          ]
+        }
+      ]}
+    />
   );
 };

src/components/PageComponents/ModuleConfig/ExternalNotification.tsx

@@ -1,26 +1,12 @@
-import { useEffect } from "react";
-import { Controller, useForm, useWatch } from "react-hook-form";
-import { Input } from "@components/form/Input.js";
-import { Toggle } from "@components/form/Toggle.js";
-import { ExternalNotificationValidation } from "@app/validation/moduleConfig/externalNotification.js";
-import { Form } from "@components/form/Form";
-import { useDevice } from "@core/providers/useDevice.js";
-import { classValidatorResolver } from "@hookform/resolvers/class-validator";
+import type { ExternalNotificationValidation } from "@app/validation/moduleConfig/externalNotification.js";
+import { useDevice } from "@core/stores/deviceStore.js";
 import { Protobuf } from "@meshtastic/meshtasticjs";
+import { DynamicForm } from "@app/components/DynamicForm.js";
 
 export const ExternalNotification = (): JSX.Element => {
   const { moduleConfig, setWorkingModuleConfig } = useDevice();
-  const { register, handleSubmit, reset, control } =
-    useForm<ExternalNotificationValidation>({
-      mode: "onChange",
-      defaultValues: moduleConfig.externalNotification,
-      resolver: classValidatorResolver(ExternalNotificationValidation)
-    });
-  useEffect(() => {
-    reset(moduleConfig.externalNotification);
-  }, [reset, moduleConfig.externalNotification]);
 
-  const onSubmit = handleSubmit((data) => {
+  const onSubmit = (data: ExternalNotificationValidation) => {
     setWorkingModuleConfig(
       new Protobuf.ModuleConfig({
         payloadVariant: {
@@ -29,170 +15,171 @@ export const ExternalNotification = (): JSX.Element => {
         }
       })
     );
-  });
-
-  const moduleEnabled = useWatch({
-    control,
-    name: "enabled",
-    defaultValue: false
-  });
+  };
 
   return (
-    <Form onSubmit={onSubmit}>
-      <Controller
-        name="enabled"
-        control={control}
-        render={({ field: { value, ...rest } }) => (
-          <Toggle
-            label="Module Enabled"
-            description="Enable External Notification"
-            checked={value}
-            {...rest}
-          />
-        )}
-      />
-      <Input
-        type="number"
-        label="Output MS"
-        description="Description"
-        suffix="ms"
-        disabled={!moduleEnabled}
-        {...register("outputMs", {
-          valueAsNumber: true
-        })}
-      />
-      <Input
-        type="number"
-        label="Output"
-        description="Description"
-        disabled={!moduleEnabled}
-        {...register("output", {
-          valueAsNumber: true
-        })}
-      />
-      <Input
-        type="number"
-        label="Output Vibrate"
-        description="Description"
-        disabled={!moduleEnabled}
-        {...register("outputVibra", {
-          valueAsNumber: true
-        })}
-      />
-      <Input
-        type="number"
-        label="Output Buzzer"
-        description="Description"
-        disabled={!moduleEnabled}
-        {...register("outputBuzzer", {
-          valueAsNumber: true
-        })}
-      />
-      <Controller
-        name="active"
-        control={control}
-        render={({ field: { value, ...rest } }) => (
-          <Toggle
-            label="Active"
-            description="Description"
-            checked={value}
-            {...rest}
-          />
-        )}
-      />
-      <Controller
-        name="alertMessage"
-        control={control}
-        render={({ field: { value, ...rest } }) => (
-          <Toggle
-            label="Alert Message"
-            description="Description"
-            checked={value}
-            {...rest}
-          />
-        )}
-      />
-      <Controller
-        name="alertMessageVibra"
-        control={control}
-        render={({ field: { value, ...rest } }) => (
-          <Toggle
-            label="Alert Message Vibrate"
-            description="Description"
-            checked={value}
-            {...rest}
-          />
-        )}
-      />
-      <Controller
-        name="alertMessageBuzzer"
-        control={control}
-        render={({ field: { value, ...rest } }) => (
-          <Toggle
-            label="Alert Message Buzzer"
-            description="Description"
-            checked={value}
-            {...rest}
-          />
-        )}
-      />
-      <Controller
-        name="alertBell"
-        control={control}
-        render={({ field: { value, ...rest } }) => (
-          <Toggle
-            label="Alert Bell"
-            description="Should an alert be triggered when receiving an incoming bell?"
-            checked={value}
-            {...rest}
-          />
-        )}
-      />
-      <Controller
-        name="alertBellVibra"
-        control={control}
-        render={({ field: { value, ...rest } }) => (
-          <Toggle
-            label="Alert Bell Vibrate"
-            description="Description"
-            checked={value}
-            {...rest}
-          />
-        )}
-      />
-      <Controller
-        name="alertBellBuzzer"
-        control={control}
-        render={({ field: { value, ...rest } }) => (
-          <Toggle
-            label="Alert Bell Buzzer"
-            description="Description"
-            checked={value}
-            {...rest}
-          />
-        )}
-      />
-      <Controller
-        name="usePwm"
-        control={control}
-        render={({ field: { value, ...rest } }) => (
-          <Toggle
-            label="Use PWM"
-            description="Description"
-            checked={value}
-            {...rest}
-          />
-        )}
-      />
-      <Input
-        type="number"
-        label="Nag Timeout"
-        description="Description"
-        disabled={!moduleEnabled}
-        {...register("nagTimeout", {
-          valueAsNumber: true
-        })}
-      />
-    </Form>
+    <DynamicForm<ExternalNotificationValidation>
+      onSubmit={onSubmit}
+      defaultValues={moduleConfig.externalNotification}
+      fieldGroups={[
+        {
+          label: "External Notification Settings",
+          description: "Configure the external notification module",
+          fields: [
+            {
+              type: "toggle",
+              name: "enabled",
+              label: "Module Enabled",
+              description: "Enable External Notification"
+            },
+            {
+              type: "number",
+              name: "outputMs",
+              label: "Output MS",
+              description: "Output MS",
+              suffix: "ms",
+              disabledBy: [
+                {
+                  fieldName: "enabled"
+                }
+              ]
+            },
+            {
+              type: "number",
+              name: "output",
+              label: "Output",
+              description: "Output",
+              disabledBy: [
+                {
+                  fieldName: "enabled"
+                }
+              ]
+            },
+            {
+              type: "number",
+              name: "outputVibra",
+              label: "Output Vibrate",
+              description: "Output Vibrate",
+              disabledBy: [
+                {
+                  fieldName: "enabled"
+                }
+              ]
+            },
+            {
+              type: "number",
+              name: "outputBuzzer",
+              label: "Output Buzzer",
+              description: "Output Buzzer",
+              disabledBy: [
+                {
+                  fieldName: "enabled"
+                }
+              ]
+            },
+            {
+              type: "toggle",
+              name: "active",
+              label: "Active",
+              description: "Active",
+              disabledBy: [
+                {
+                  fieldName: "enabled"
+                }
+              ]
+            },
+            {
+              type: "toggle",
+              name: "alertMessage",
+              label: "Alert Message",
+              description: "Alert Message",
+              disabledBy: [
+                {
+                  fieldName: "enabled"
+                }
+              ]
+            },
+            {
+              type: "toggle",
+              name: "alertMessageVibra",
+              label: "Alert Message Vibrate",
+              description: "Alert Message Vibrate",
+              disabledBy: [
+                {
+                  fieldName: "enabled"
+                }
+              ]
+            },
+            {
+              type: "toggle",
+              name: "alertMessageBuzzer",
+              label: "Alert Message Buzzer",
+              description: "Alert Message Buzzer",
+              disabledBy: [
+                {
+                  fieldName: "enabled"
+                }
+              ]
+            },
+            {
+              type: "toggle",
+              name: "alertBell",
+              label: "Alert Bell",
+              description:
+                "Should an alert be triggered when receiving an incoming bell?",
+              disabledBy: [
+                {
+                  fieldName: "enabled"
+                }
+              ]
+            },
+            {
+              type: "toggle",
+              name: "alertBellVibra",
+              label: "Alert Bell Vibrate",
+              description: "Alert Bell Vibrate",
+              disabledBy: [
+                {
+                  fieldName: "enabled"
+                }
+              ]
+            },
+            {
+              type: "toggle",
+              name: "alertBellBuzzer",
+              label: "Alert Bell Buzzer",
+              description: "Alert Bell Buzzer",
+              disabledBy: [
+                {
+                  fieldName: "enabled"
+                }
+              ]
+            },
+            {
+              type: "toggle",
+              name: "usePwm",
+              label: "Use PWM",
+              description: "Use PWM",
+              disabledBy: [
+                {
+                  fieldName: "enabled"
+                }
+              ]
+            },
+            {
+              type: "number",
+              name: "nagTimeout",
+              label: "Nag Timeout",
+              description: "Nag Timeout",
+              disabledBy: [
+                {
+                  fieldName: "enabled"
+                }
+              ]
+            }
+          ]
+        }
+      ]}
+    />
   );
 };

src/components/PageComponents/ModuleConfig/MQTT.tsx

@@ -1,38 +1,12 @@
-import { useEffect } from "react";
-import { Controller, useForm, useWatch } from "react-hook-form";
-import { Input } from "@components/form/Input.js";
-import { Toggle } from "@components/form/Toggle.js";
-import { MQTTValidation } from "@app/validation/moduleConfig/mqtt.js";
-import { Form } from "@components/form/Form";
-import { useDevice } from "@core/providers/useDevice.js";
-import { classValidatorResolver } from "@hookform/resolvers/class-validator";
+import type { MQTTValidation } from "@app/validation/moduleConfig/mqtt.js";
 import { Protobuf } from "@meshtastic/meshtasticjs";
+import { DynamicForm } from "@app/components/DynamicForm.js";
+import { useDevice } from "@app/core/stores/deviceStore.js";
 
 export const MQTT = (): JSX.Element => {
   const { moduleConfig, setWorkingModuleConfig } = useDevice();
-  const {
-    register,
-    handleSubmit,
-    formState: { errors, isDirty },
-    reset,
-    control
-  } = useForm<MQTTValidation>({
-    mode: "onChange",
-    defaultValues: moduleConfig.mqtt,
-    resolver: classValidatorResolver(MQTTValidation)
-  });
 
-  const moduleEnabled = useWatch({
-    control,
-    name: "enabled",
-    defaultValue: false
-  });
-
-  useEffect(() => {
-    reset(moduleConfig.mqtt);
-  }, [reset, moduleConfig.mqtt]);
-
-  const onSubmit = handleSubmit((data) => {
+  const onSubmit = (data: MQTTValidation) => {
     setWorkingModuleConfig(
       new Protobuf.ModuleConfig({
         payloadVariant: {
@@ -41,66 +15,71 @@ export const MQTT = (): JSX.Element => {
         }
       })
     );
-  });
+  };
 
   return (
-    <Form onSubmit={onSubmit}>
-      <Controller
-        name="enabled"
-        control={control}
-        render={({ field: { value, ...rest } }) => (
-          <Toggle
-            label="Module Enabled"
-            description="Enable MQTT"
-            checked={value}
-            {...rest}
-          />
-        )}
-      />
-      <Input
-        label="MQTT Server Address"
-        description="Description"
-        disabled={!moduleEnabled}
-        {...register("address")}
-      />
-      <Input
-        label="MQTT Username"
-        description="MQTT username to use for default/custom servers"
-        disabled={!moduleEnabled}
-        {...register("username")}
-      />
-      <Input
-        label="MQTT Password"
-        description="MQTT password to use for default/custom servers"
-        type="password"
-        autoComplete="off"
-        disabled={!moduleEnabled}
-        {...register("password")}
-      />
-      <Controller
-        name="encryptionEnabled"
-        control={control}
-        render={({ field: { value, ...rest } }) => (
-          <Toggle
-            label="Encryption Enabled"
-            //description="Description"
-            checked={value}
-            {...rest}
-          />
-        )}
-      />
-      <Controller
-        name="jsonEnabled"
-        control={control}
-        render={({ field: { value, ...rest } }) => (
-          <Toggle
-            label="JSON Output Enabled"
-            description="Enable the sending / consumption of JSON packets on MQTT (Not encrypted)"
-            checked={value}
-            {...rest}
-          />
-        )}
-      />
-    </Form>
+    <DynamicForm<MQTTValidation>
+      onSubmit={onSubmit}
+      defaultValues={moduleConfig.mqtt}
+      fieldGroups={[
+        {
+          label: "MQTT Settings",
+          description: "Settings for the MQTT module",
+          fields: [
+            {
+              type: "toggle",
+              name: "enabled",
+              label: "Enabled",
+              description: "Enable or disable MQTT"
+            },
+            {
+              type: "text",
+              name: "address",
+              label: "MQTT Server Address",
+              description:
+                "MQTT server address to use for default/custom servers",
+              disabledBy: [
+                {
+                  fieldName: "enabled"
+                }
+              ]
+            },
+            {
+              type: "text",
+              name: "username",
+              label: "MQTT Username",
+              description: "MQTT username to use for default/custom servers",
+              disabledBy: [
+                {
+                  fieldName: "enabled"
+                }
+              ]
+            },
+            {
+              type: "password",
+              name: "password",
+              label: "MQTT Password",
+              description: "MQTT password to use for default/custom servers",
+              disabledBy: [
+                {
+                  fieldName: "enabled"
+                }
+              ]
+            },
+            {
+              type: "toggle",
+              name: "encryptionEnabled",
+              label: "Encryption Enabled",
+              description: "Enable or disable MQTT encryption",
+              disabledBy: [
+                {
+                  fieldName: "enabled"
+                }
+              ]
+            }
+          ]
+        }
+      ]}
+    />
   );
 };

src/components/PageComponents/ModuleConfig/RangeTest.tsx

@@ -1,27 +1,12 @@
-import { useEffect } from "react";
-import { Controller, useForm, useWatch } from "react-hook-form";
-import { Input } from "@components/form/Input.js";
-import { Toggle } from "@components/form/Toggle.js";
-import { RangeTestValidation } from "@app/validation/moduleConfig/rangeTest.js";
-import { Form } from "@components/form/Form";
-import { useDevice } from "@core/providers/useDevice.js";
-import { classValidatorResolver } from "@hookform/resolvers/class-validator";
+import type { RangeTestValidation } from "@app/validation/moduleConfig/rangeTest.js";
+import { useDevice } from "@core/stores/deviceStore.js";
 import { Protobuf } from "@meshtastic/meshtasticjs";
+import { DynamicForm } from "@app/components/DynamicForm.js";
 
 export const RangeTest = (): JSX.Element => {
   const { moduleConfig, setWorkingModuleConfig } = useDevice();
-  const { register, handleSubmit, reset, control } =
-    useForm<RangeTestValidation>({
-      mode: "onChange",
-      defaultValues: moduleConfig.rangeTest,
-      resolver: classValidatorResolver(RangeTestValidation)
-    });
 
-  useEffect(() => {
-    reset(moduleConfig.rangeTest);
-  }, [reset, moduleConfig.rangeTest]);
-
-  const onSubmit = handleSubmit((data) => {
+  const onSubmit = (data: RangeTestValidation) => {
     setWorkingModuleConfig(
       new Protobuf.ModuleConfig({
         payloadVariant: {
@@ -30,45 +15,48 @@ export const RangeTest = (): JSX.Element => {
         }
       })
     );
-  });
-
-  const moduleEnabled = useWatch({
-    control,
-    name: "enabled",
-    defaultValue: false
-  });
+  };
 
   return (
-    <Form onSubmit={onSubmit}>
-      <Controller
-        name="enabled"
-        control={control}
-        render={({ field: { value, ...rest } }) => (
-          <Toggle label="Module Enabled" checked={value} {...rest} />
-        )}
-      />
-      <Input
-        type="number"
-        label="Message Interval"
-        description="How long to wait between sending test packets"
-        disabled={!moduleEnabled}
-        suffix="Seconds"
-        {...register("sender", {
-          valueAsNumber: true
-        })}
-      />
-      <Controller
-        name="save"
-        control={control}
-        render={({ field: { value, ...rest } }) => (
-          <Toggle
-            label="Save CSV to storage"
-            description="ESP32 Only"
-            checked={value}
-            {...rest}
-          />
-        )}
-      />
-    </Form>
+    <DynamicForm<RangeTestValidation>
+      onSubmit={onSubmit}
+      defaultValues={moduleConfig.mqtt}
+      fieldGroups={[
+        {
+          label: "Range Test Settings",
+          description: "Settings for the Range Test module",
+          fields: [
+            {
+              type: "toggle",
+              name: "enabled",
+              label: "Module Enabled",
+              description: "Enable Range Test"
+            },
+            {
+              type: "number",
+              name: "sender",
+              label: "Message Interval",
+              description: "How long to wait between sending test packets",
+              disabledBy: [
+                {
+                  fieldName: "enabled"
+                }
+              ]
+            },
+            {
+              type: "toggle",
+              name: "save",
+              label: "Save CSV to storage",
+              description: "ESP32 Only",
+              disabledBy: [
+                {
+                  fieldName: "enabled"
+                }
+              ]
+            }
+          ]
+        }
+      ]}
+    />
   );
 };

src/components/PageComponents/ModuleConfig/Serial.tsx

@@ -1,28 +1,12 @@
-import { useEffect } from "react";
-import { Controller, useForm, useWatch } from "react-hook-form";
-import { Input } from "@components/form/Input.js";
-import { Toggle } from "@components/form/Toggle.js";
-import { SerialValidation } from "@app/validation/moduleConfig/serial.js";
-import { Form } from "@components/form/Form";
-import { useDevice } from "@core/providers/useDevice.js";
-import { classValidatorResolver } from "@hookform/resolvers/class-validator";
+import type { SerialValidation } from "@app/validation/moduleConfig/serial.js";
+import { useDevice } from "@core/stores/deviceStore.js";
 import { Protobuf } from "@meshtastic/meshtasticjs";
-import { renderOptions } from "@core/utils/selectEnumOptions";
-import { Select } from "@components/form/Select";
+import { DynamicForm } from "@app/components/DynamicForm.js";
 
 export const Serial = (): JSX.Element => {
   const { moduleConfig, setWorkingModuleConfig } = useDevice();
-  const { register, handleSubmit, reset, control } = useForm<SerialValidation>({
-    mode: "onChange",
-    defaultValues: moduleConfig.serial,
-    resolver: classValidatorResolver(SerialValidation)
-  });
 
-  useEffect(() => {
-    reset(moduleConfig.serial);
-  }, [reset, moduleConfig.serial]);
-
-  const onSubmit = handleSubmit((data) => {
+  const onSubmit = (data: SerialValidation) => {
     setWorkingModuleConfig(
       new Protobuf.ModuleConfig({
         payloadVariant: {
@@ -31,84 +15,98 @@ export const Serial = (): JSX.Element => {
         }
       })
     );
-  });
-
-  const moduleEnabled = useWatch({
-    control,
-    name: "enabled",
-    defaultValue: false
-  });
+  };
 
   return (
-    <Form onSubmit={onSubmit}>
-      <Controller
-        name="enabled"
-        control={control}
-        render={({ field: { value, ...rest } }) => (
-          <Toggle
-            label="Module Enabled"
-            description="Enable Serial output"
-            checked={value}
-            {...rest}
-          />
-        )}
-      />
-      <Controller
-        name="echo"
-        control={control}
-        render={({ field: { value, ...rest } }) => (
-          <Toggle
-            label="Echo"
-            description="Any packets you send will be echoed back to your device"
-            checked={value}
-            {...rest}
-          />
-        )}
-      />
-      <Input
-        type="number"
-        label="RX Pin"
-        description="Set the GPIO pin to the RXD pin you have set up."
-        disabled={!moduleEnabled}
-        {...register("rxd", {
-          valueAsNumber: true
-        })}
-      />
-      <Input
-        type="number"
-        label="TX Pin"
-        description="Set the GPIO pin to the TXD pin you have set up."
-        disabled={!moduleEnabled}
-        {...register("txd", {
-          valueAsNumber: true
-        })}
-      />
-      <Select
-        label="Baud Rate"
-        description="The serial baud rate"
-        disabled={!moduleEnabled}
-        {...register("baud", { valueAsNumber: true })}
-      >
-        {renderOptions(Protobuf.ModuleConfig_SerialConfig_Serial_Baud)}
-      </Select>
-      <Input
-        type="number"
-        label="Timeout"
-        suffix="Seconds"
-        description="Seconds to wait before we consider your packet as 'done'"
-        disabled={!moduleEnabled}
-        {...register("timeout", {
-          valueAsNumber: true
-        })}
-      />
-      <Select
-        label="Mode"
-        description="Select Mode"
-        disabled={!moduleEnabled}
-        {...register("mode", { valueAsNumber: true })}
-      >
-        {renderOptions(Protobuf.ModuleConfig_SerialConfig_Serial_Mode)}
-      </Select>
-    </Form>
+    <DynamicForm<SerialValidation>
+      onSubmit={onSubmit}
+      defaultValues={moduleConfig.serial}
+      fieldGroups={[
+        {
+          label: "Serial Settings",
+          description: "Settings for the Serial module",
+          fields: [
+            {
+              type: "toggle",
+              name: "enabled",
+              label: "Module Enabled",
+              description: "Enable Serial output"
+            },
+            {
+              type: "toggle",
+              name: "echo",
+              label: "Echo",
+              description:
+                "Any packets you send will be echoed back to your device",
+              disabledBy: [
+                {
+                  fieldName: "enabled"
+                }
+              ]
+            },
+            {
+              type: "number",
+              name: "rxd",
+              label: "Receive Pin",
+              description: "Set the GPIO pin to the RXD pin you have set up.",
+              disabledBy: [
+                {
+                  fieldName: "enabled"
+                }
+              ]
+            },
+            {
+              type: "number",
+              name: "txd",
+              label: "Transmit Pin",
+              description: "Set the GPIO pin to the TXD pin you have set up.",
+              disabledBy: [
+                {
+                  fieldName: "enabled"
+                }
+              ]
+            },
+            {
+              type: "select",
+              name: "baud",
+              label: "Baud Rate",
+              description: "The serial baud rate",
+              enumValue: Protobuf.ModuleConfig_SerialConfig_Serial_Baud,
+              disabledBy: [
+                {
+                  fieldName: "enabled"
+                }
+              ]
+            },
+            {
+              type: "number",
+              name: "timeout",
+              label: "Timeout",
+              suffix: "Seconds",
+              description:
+                "Seconds to wait before we consider your packet as 'done'",
+              disabledBy: [
+                {
+                  fieldName: "enabled"
+                }
+              ]
+            },
+            {
+              type: "select",
+              name: "mode",
+              label: "Mode",
+              description: "Select Mode",
+              enumValue: Protobuf.ModuleConfig_SerialConfig_Serial_Mode,
+              formatEnumName: true,
+              disabledBy: [
+                {
+                  fieldName: "enabled"
+                }
+              ]
+            }
+          ]
+        }
+      ]}
+    />
   );
 };

src/components/PageComponents/ModuleConfig/StoreForward.tsx

@@ -1,27 +1,12 @@
-import { useEffect } from "react";
-import { Controller, useForm, useWatch } from "react-hook-form";
-import { Input } from "@components/form/Input.js";
-import { Toggle } from "@components/form/Toggle.js";
-import { StoreForwardValidation } from "@app/validation/moduleConfig/storeForward.js";
-import { Form } from "@components/form/Form";
-import { useDevice } from "@core/providers/useDevice.js";
-import { classValidatorResolver } from "@hookform/resolvers/class-validator";
+import type { StoreForwardValidation } from "@app/validation/moduleConfig/storeForward.js";
+import { useDevice } from "@core/stores/deviceStore.js";
 import { Protobuf } from "@meshtastic/meshtasticjs";
+import { DynamicForm } from "@app/components/DynamicForm.js";
 
 export const StoreForward = (): JSX.Element => {
   const { moduleConfig, setWorkingModuleConfig } = useDevice();
-  const { register, handleSubmit, reset, control } =
-    useForm<StoreForwardValidation>({
-      mode: "onChange",
-      defaultValues: moduleConfig.storeForward,
-      resolver: classValidatorResolver(StoreForwardValidation)
-    });
 
-  useEffect(() => {
-    reset(moduleConfig.storeForward);
-  }, [reset, moduleConfig.storeForward]);
-
-  const onSubmit = handleSubmit((data) => {
+  const onSubmit = (data: StoreForwardValidation) => {
     setWorkingModuleConfig(
       new Protobuf.ModuleConfig({
         payloadVariant: {
@@ -30,68 +15,71 @@ export const StoreForward = (): JSX.Element => {
         }
       })
     );
-  });
-
-  const moduleEnabled = useWatch({
-    control,
-    name: "enabled",
-    defaultValue: false
-  });
+  };
 
   return (
-    <Form onSubmit={onSubmit}>
-      <Controller
-        name="enabled"
-        control={control}
-        render={({ field: { value, ...rest } }) => (
-          <Toggle
-            label="Module Enabled"
-            description="Description"
-            checked={value}
-            {...rest}
-          />
-        )}
-      />
-      <Controller
-        name="heartbeat"
-        control={control}
-        render={({ field: { value, ...rest } }) => (
-          <Toggle
-            label="Heartbeat Enabled"
-            description="Description"
-            checked={value}
-            {...rest}
-          />
-        )}
-      />
-      <Input
-        type="number"
-        label="Number of records"
-        description="Max transmit power in dBm"
-        suffix="Records"
-        disabled={!moduleEnabled}
-        {...register("records", {
-          valueAsNumber: true
-        })}
-      />
-      <Input
-        type="number"
-        label="History return max"
-        description="Max transmit power in dBm"
-        disabled={!moduleEnabled}
-        {...register("historyReturnMax", {
-          valueAsNumber: true
-        })}
-      />
-      <Input
-        type="number"
-        label="History return window"
-        description="Max transmit power in dBm"
-        disabled={!moduleEnabled}
-        {...register("historyReturnWindow", {
-          valueAsNumber: true
-        })}
-      />
-    </Form>
+    <DynamicForm<StoreForwardValidation>
+      onSubmit={onSubmit}
+      defaultValues={moduleConfig.mqtt}
+      fieldGroups={[
+        {
+          label: "Store & Forward Settings",
+          description: "Settings for the Store & Forward module",
+          fields: [
+            {
+              type: "toggle",
+              name: "enabled",
+              label: "Module Enabled",
+              description: "Enable Store & Forward"
+            },
+            {
+              type: "toggle",
+              name: "heartbeat",
+              label: "Heartbeat Enabled",
+              description: "Enable Store & Forward heartbeat",
+              disabledBy: [
+                {
+                  fieldName: "enabled"
+                }
+              ]
+            },
+            {
+              type: "number",
+              name: "records",
+              label: "Number of records",
+              description: "Number of records to store",
+              suffix: "Records",
+              disabledBy: [
+                {
+                  fieldName: "enabled"
+                }
+              ]
+            },
+            {
+              type: "number",
+              name: "historyReturnMax",
+              label: "History return max",
+              description: "Max number of records to return",
+              disabledBy: [
+                {
+                  fieldName: "enabled"
+                }
+              ]
+            },
+            {
+              type: "number",
+              name: "historyReturnWindow",
+              label: "History return window",
+              description: "Max number of records to return",
+              disabledBy: [
+                {
+                  fieldName: "enabled"
+                }
+              ]
+            }
+          ]
+        }
+      ]}
+    />
   );
 };

src/components/PageComponents/ModuleConfig/Telemetry.tsx

@@ -1,27 +1,12 @@
-import { useEffect } from "react";
-import { Controller, useForm } from "react-hook-form";
-import { Input } from "@components/form/Input.js";
-import { Toggle } from "@components/form/Toggle.js";
-import { TelemetryValidation } from "@app/validation/moduleConfig/telemetry.js";
-import { Form } from "@components/form/Form";
-import { useDevice } from "@core/providers/useDevice.js";
-import { classValidatorResolver } from "@hookform/resolvers/class-validator";
+import type { TelemetryValidation } from "@app/validation/moduleConfig/telemetry.js";
+import { useDevice } from "@core/stores/deviceStore.js";
 import { Protobuf } from "@meshtastic/meshtasticjs";
+import { DynamicForm } from "@app/components/DynamicForm.js";
 
 export const Telemetry = (): JSX.Element => {
   const { moduleConfig, setWorkingModuleConfig } = useDevice();
-  const { register, handleSubmit, reset, control } =
-    useForm<TelemetryValidation>({
-      mode: "onChange",
-      defaultValues: moduleConfig.telemetry,
-      resolver: classValidatorResolver(TelemetryValidation)
-    });
 
-  useEffect(() => {
-    reset(moduleConfig.telemetry);
-  }, [reset, moduleConfig.telemetry]);
-
-  const onSubmit = handleSubmit((data) => {
+  const onSubmit = (data: TelemetryValidation) => {
     setWorkingModuleConfig(
       new Protobuf.ModuleConfig({
         payloadVariant: {
@@ -30,55 +15,51 @@ export const Telemetry = (): JSX.Element => {
         }
       })
     );
-  });
+  };
 
   return (
-    <Form onSubmit={onSubmit}>
-      <Controller
-        name="environmentMeasurementEnabled"
-        control={control}
-        render={({ field: { value, ...rest } }) => (
-          <Toggle
-            label="Module Enabled"
-            description="Enable the Environment Telemetry"
-            checked={value}
-            {...rest}
-          />
-        )}
-      />
-      <Controller
-        name="environmentScreenEnabled"
-        control={control}
-        render={({ field: { value, ...rest } }) => (
-          <Toggle
-            label="Displayed on Screen"
-            description="Show the Telemetry Module on the OLED"
-            checked={value}
-            {...rest}
-          />
-        )}
-      />
-      <Input
-        label="Update Interval"
-        description="How often to send Metrics over the mesh"
-        suffix="Seconds"
-        type="number"
-        {...register("environmentUpdateInterval", {
-          valueAsNumber: true
-        })}
-      />
-      <Controller
-        name="environmentDisplayFahrenheit"
-        control={control}
-        render={({ field: { value, ...rest } }) => (
-          <Toggle
-            label="Display Fahrenheit"
-            description="Display temp in Fahrenheit"
-            checked={value}
-            {...rest}
-          />
-        )}
-      />
-    </Form>
+    <DynamicForm<TelemetryValidation>
+      onSubmit={onSubmit}
+      defaultValues={moduleConfig.telemetry}
+      fieldGroups={[
+        {
+          label: "Telemetry Settings",
+          description: "Settings for the Telemetry module",
+          fields: [
+            {
+              type: "number",
+              name: "deviceUpdateInterval",
+              label: "Interval to get telemetry data",
+              suffix: "seconds"
+            },
+            {
+              type: "number",
+              name: "environmentUpdateInterval",
+              label: "Update Interval",
+              description: "How often to send Metrics over the mesh",
+              suffix: "seconds"
+            },
+            {
+              type: "toggle",
+              name: "environmentMeasurementEnabled",
+              label: "Module Enabled",
+              description: "Enable the Environment Telemetry"
+            },
+            {
+              type: "toggle",
+              name: "environmentScreenEnabled",
+              label: "Displayed on Screen",
+              description: "Show the Telemetry Module on the OLED"
+            },
+            {
+              type: "toggle",
+              name: "environmentDisplayFahrenheit",
+              label: "Display Fahrenheit",
+              description: "Display temp in Fahrenheit"
+            }
+          ]
+        }
+      ]}
+    />
   );
 };

src/components/Sidebar.tsx

@@ -1,70 +1,94 @@
-import { useDevice } from "@core/providers/useDevice.js";
-import { toMGRS } from "@core/utils/toMGRS.js";
-import { BatteryWidget } from "@components/Widgets/BatteryWidget.js";
-import { DeviceWidget } from "@components/Widgets/DeviceWidget.js";
-import { PeersWidget } from "@components/Widgets/PeersWidget.js";
-import { PositionWidget } from "@components/Widgets/PositionWidget.js";
-import { useAppStore } from "@core/stores/appStore.js";
-import { useDeviceStore } from "@core/stores/deviceStore.js";
-import { CommandLineIcon } from "@heroicons/react/24/outline";
-import { Types } from "@meshtastic/meshtasticjs";
-import { Input } from "@components/form/Input.js";
+import { useDevice } from "@core/stores/deviceStore.js";
+import type { Page } from "@core/stores/deviceStore.js";
+import {
+  LucideIcon,
+  MapIcon,
+  MessageSquareIcon,
+  SettingsIcon,
+  LayersIcon,
+  UsersIcon,
+  EditIcon,
+  LayoutGrid
+} from "lucide-react";
+import { Subtle } from "./UI/Typography/Subtle.js";
+import { Button } from "./UI/Button.js";
+import { SidebarSection } from "./UI/Sidebar/SidebarSection.js";
+import { SidebarButton } from "./UI/Sidebar/sidebarButton.js";
 
-export const Sidebar = (): JSX.Element => {
-  const { removeDevice } = useDeviceStore();
-  const { connection, hardware, nodes, status, currentMetrics } = useDevice();
-  const { selectedDevice, setSelectedDevice, setCommandPaletteOpen } =
-    useAppStore();
+export interface SidebarProps {
+  children?: React.ReactNode;
+}
+
+export const Sidebar = ({ children }: SidebarProps): JSX.Element => {
+  const { hardware, nodes } = useDevice();
   const myNode = nodes.find((n) => n.data.num === hardware.myNodeNum);
+  const { activePage, setActivePage, setDialogOpen } = useDevice();
+
+  interface NavLink {
+    name: string;
+    icon: LucideIcon;
+    page: Page;
+  }
+
+  const pages: NavLink[] = [
+    {
+      name: "Messages",
+      icon: MessageSquareIcon,
+      page: "messages"
+    },
+    {
+      name: "Map",
+      icon: MapIcon,
+      page: "map"
+    },
+    {
+      name: "Config",
+      icon: SettingsIcon,
+      page: "config"
+    },
+    {
+      name: "Channels",
+      icon: LayersIcon,
+      page: "channels"
+    },
+    {
+      name: "Peers",
+      icon: UsersIcon,
+      page: "peers"
+    }
+  ];
 
   return (
-    <div className="bg-slate-50 relative flex w-72 flex-shrink-0 flex-col gap-2 p-2">
-      <DeviceWidget
-        name={
-          nodes.find((n) => n.data.num === hardware.myNodeNum)?.data.user
-            ?.longName ?? "UNK"
-        }
-        nodeNum={hardware.myNodeNum.toString()}
-        disconnected={status === Types.DeviceStatusEnum.DEVICE_DISCONNECTED}
-        disconnect={() => {
-          void connection?.disconnect();
-          setSelectedDevice(0);
-          removeDevice(selectedDevice ?? 0);
-        }}
-        reconnect={() => {
-          void connection?.disconnect();
-        }}
-      />
-
-      <div className="flex flex-grow flex-col gap-3">
-        <BatteryWidget
-          batteryLevel={currentMetrics.batteryLevel}
-          voltage={currentMetrics.voltage}
-        />
-        <PeersWidget
-          peers={nodes
-            .map((n) => n.data)
-            .filter((n) => n.num !== hardware.myNodeNum)}
-        />
-        <PositionWidget
-          grid={toMGRS(
-            myNode?.data.position?.latitudeI,
-            myNode?.data.position?.longitudeI
-          )}
-        />
-        <div className="mt-auto">
-          <Input
-            placeholder={"Search for a command"}
-            onClick={() => setCommandPaletteOpen(true)}
-            action={{
-              icon: <CommandLineIcon className="w-4" />,
-              action() {
-                setCommandPaletteOpen(true);
-              }
-            }}
-          />
+    <div className="min-w-[280px] max-w-min flex-col border-r-[0.5px] border-slate-300 bg-transparent dark:border-slate-700">
+      <div className="flex justify-between px-8 py-6">
+        <div>
+          <span className="text-lg font-medium">
+            {myNode?.data.user?.shortName ?? "UNK"}
+          </span>
+          <Subtle>{myNode?.data.user?.longName ?? "UNK"}</Subtle>
         </div>
+        <button
+          className="transition-all hover:text-accent"
+          onClick={() => setDialogOpen("deviceName", true)}
+        >
+          <EditIcon size={16} />
+        </button>
       </div>
+
+      <SidebarSection label="Navigation">
+        {pages.map((link) => (
+          <SidebarButton
+            key={link.page}
+            label={link.name}
+            icon={link.icon}
+            onClick={() => {
+              setActivePage(link.page);
+            }}
+            active={link.page === activePage}
+          />
+        ))}
+      </SidebarSection>
+      {children}
     </div>
   );
 };

src/components/Topbar.tsx

@@ -0,0 +1,42 @@
+import { LucideIcon, AlignLeftIcon } from "lucide-react";
+
+export interface PageLayoutProps {
+  label: string;
+  children: React.ReactNode;
+  actions?: {
+    icon: LucideIcon;
+    onClick: () => void;
+  }[];
+}
+
+export const PageLayout = ({
+  label: title,
+  actions,
+  children
+}: PageLayoutProps): JSX.Element => {
+  return (
+    <div className="relative flex h-full w-full flex-col">
+      <div className="flex h-14 shrink-0 border-b-[0.5px] border-slate-300 dark:border-slate-700 md:h-16 md:px-4">
+        <button className="pl-4 transition-all hover:text-accent md:hidden">
+          <AlignLeftIcon />
+        </button>
+        <div className="flex flex-1 items-center justify-between px-4 md:px-0">
+          <div className="flex w-full items-center">
+            <span className="w-full text-lg font-medium">{title}</span>
+            <div className="flex justify-end space-x-4">
+              {actions?.map((action) => (
+                <button
+                  className="transition-all hover:text-accent"
+                  onClick={action.onClick}
+                >
+                  <action.icon />
+                </button>
+              ))}
+            </div>
+          </div>
+        </div>
+      </div>
+      {children}
+    </div>
+  );
+};

src/components/UI/Button.tsx

@@ -0,0 +1,53 @@
+import * as React from "react";
+import { VariantProps, cva } from "class-variance-authority";
+
+import { cn } from "@core/utils/cn.js";
+
+const buttonVariants = cva(
+  "inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus:outline-none focus:ring-2 focus:ring-slate-400 focus:ring-offset-2 dark:hover:bg-slate-800 dark:hover:text-slate-100 disabled:opacity-50 dark:focus:ring-slate-400 disabled:pointer-events-none dark:focus:ring-offset-slate-900 data-[state=open]:bg-slate-100 dark:data-[state=open]:bg-slate-800",
+  {
+    variants: {
+      variant: {
+        default:
+          "bg-slate-900 text-white hover:bg-slate-700 dark:bg-slate-50 dark:text-slate-900",
+        destructive:
+          "bg-red-500 text-white hover:bg-red-600 dark:hover:bg-red-600",
+        outline:
+          "bg-transparent border border-slate-200 hover:bg-slate-100 dark:border-slate-700 dark:text-slate-100",
+        subtle:
+          "bg-slate-100 text-slate-900 hover:bg-slate-200 dark:bg-slate-700 dark:text-slate-100",
+        ghost:
+          "bg-transparent hover:bg-slate-100 dark:hover:bg-slate-800 dark:text-slate-100 dark:hover:text-slate-100 data-[state=open]:bg-transparent dark:data-[state=open]:bg-transparent",
+        link: "bg-transparent underline-offset-4 hover:underline text-slate-900 dark:text-slate-100 hover:bg-transparent dark:hover:bg-transparent"
+      },
+      size: {
+        default: "h-10 py-2 px-4",
+        sm: "h-9 px-2 rounded-md",
+        lg: "h-11 px-8 rounded-md"
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default"
+    }
+  }
+);
+
+export interface ButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof buttonVariants> {}
+
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, variant, size, ...props }, ref) => {
+    return (
+      <button
+        className={cn(buttonVariants({ variant, size, className }))}
+        ref={ref}
+        {...props}
+      />
+    );
+  }
+);
+Button.displayName = "Button";
+
+export { Button, buttonVariants };

src/components/UI/Command.tsx

@@ -0,0 +1,156 @@
+import * as React from "react";
+import type { DialogProps } from "@radix-ui/react-dialog";
+import { Command as CommandPrimitive } from "cmdk";
+import { Search } from "lucide-react";
+
+import { cn } from "@core/utils/cn.js";
+import { Dialog, DialogContent } from "@components/UI/Dialog.js";
+
+const Command = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive
+    ref={ref}
+    className={cn(
+      "flex h-full w-full flex-col overflow-hidden rounded-lg bg-white dark:bg-slate-800",
+      className
+    )}
+    {...props}
+  />
+));
+Command.displayName = CommandPrimitive.displayName;
+
+interface CommandDialogProps extends DialogProps {}
+
+const CommandDialog = ({ children, ...props }: CommandDialogProps) => {
+  return (
+    <Dialog {...props}>
+      <DialogContent className="overflow-hidden p-0 shadow-2xl [&_[dialog-overlay]]:bg-red-100">
+        <Command className="[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-slate-500 [&_[cmdk-group]]:px-2 [&_[cmdk-group]_+[cmdk-group]]:pt-0 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
+          {children}
+        </Command>
+      </DialogContent>
+    </Dialog>
+  );
+};
+
+const CommandInput = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.Input>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input>
+>(({ className, ...props }, ref) => (
+  <div
+    className="flex items-center border-b border-b-slate-100 px-4 dark:border-b-slate-700"
+    cmdk-input-wrapper=""
+  >
+    <Search className="mr-2 h-4 w-4 shrink-0 opacity-50" />
+    <CommandPrimitive.Input
+      ref={ref}
+      className={cn(
+        "flex h-11 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-slate-400 disabled:cursor-not-allowed disabled:opacity-50 dark:text-slate-50",
+        className
+      )}
+      {...props}
+    />
+  </div>
+));
+
+CommandInput.displayName = CommandPrimitive.Input.displayName;
+
+const CommandList = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.List>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.List>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive.List
+    ref={ref}
+    className={cn("max-h-[300px] overflow-y-auto overflow-x-hidden", className)}
+    {...props}
+  />
+));
+
+CommandList.displayName = CommandPrimitive.List.displayName;
+
+const CommandEmpty = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.Empty>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Empty>
+>((props, ref) => (
+  <CommandPrimitive.Empty
+    ref={ref}
+    className="py-6 text-center text-sm"
+    {...props}
+  />
+));
+
+CommandEmpty.displayName = CommandPrimitive.Empty.displayName;
+
+const CommandGroup = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.Group>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Group>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive.Group
+    ref={ref}
+    className={cn(
+      "overflow-hidden py-3 px-2 text-slate-700 dark:text-slate-400 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:pb-1.5 [&_[cmdk-group-heading]]:text-sm [&_[cmdk-group-heading]]:font-semibold [&_[cmdk-group-heading]]:text-slate-900 [&_[cmdk-group-heading]]:dark:text-slate-300",
+      className
+    )}
+    {...props}
+  />
+));
+
+CommandGroup.displayName = CommandPrimitive.Group.displayName;
+
+const CommandSeparator = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive.Separator
+    ref={ref}
+    className={cn("-mx-1 h-px bg-slate-100 dark:bg-slate-700", className)}
+    {...props}
+  />
+));
+CommandSeparator.displayName = CommandPrimitive.Separator.displayName;
+
+const CommandItem = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Item>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive.Item
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-md py-1.5 px-2 text-sm font-medium outline-none aria-selected:bg-slate-100 data-[disabled]:pointer-events-none data-[disabled]:opacity-50 dark:aria-selected:bg-slate-700",
+      className
+    )}
+    {...props}
+  />
+));
+
+CommandItem.displayName = CommandPrimitive.Item.displayName;
+
+const CommandShortcut = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLSpanElement>) => {
+  return (
+    <span
+      className={cn(
+        "ml-auto text-xs tracking-widest text-slate-500",
+        className
+      )}
+      {...props}
+    />
+  );
+};
+CommandShortcut.displayName = "CommandShortcut";
+
+export {
+  Command,
+  CommandDialog,
+  CommandInput,
+  CommandList,
+  CommandEmpty,
+  CommandGroup,
+  CommandItem,
+  CommandShortcut,
+  CommandSeparator
+};

src/components/UI/Dialog.tsx

@@ -0,0 +1,128 @@
+import * as React from "react";
+import * as DialogPrimitive from "@radix-ui/react-dialog";
+import { X } from "lucide-react";
+
+import { cn } from "@core/utils/cn.js";
+
+const Dialog = DialogPrimitive.Root;
+
+const DialogTrigger = DialogPrimitive.Trigger;
+
+const DialogPortal = ({
+  className,
+  children,
+  ...props
+}: DialogPrimitive.DialogPortalProps) => (
+  <DialogPrimitive.Portal className={cn(className)} {...props}>
+    <div className="fixed inset-0 z-50 flex items-start justify-center sm:items-center">
+      {children}
+    </div>
+  </DialogPrimitive.Portal>
+);
+DialogPortal.displayName = DialogPrimitive.Portal.displayName;
+
+const DialogOverlay = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
+>(({ className, children, ...props }, ref) => (
+  <DialogPrimitive.Overlay
+    className={cn(
+      "fixed inset-0 z-50 bg-black/50 backdrop-blur-sm transition-opacity animate-in fade-in",
+      className
+    )}
+    {...props}
+    ref={ref}
+  />
+));
+DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
+
+const DialogContent = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
+>(({ className, children, ...props }, ref) => (
+  <DialogPortal>
+    <DialogOverlay />
+    <DialogPrimitive.Content
+      ref={ref}
+      className={cn(
+        "fixed z-50 grid w-full scale-100 gap-4 bg-white p-6 opacity-100 animate-in fade-in-90 slide-in-from-bottom-10 sm:max-w-lg sm:rounded-lg sm:zoom-in-90 sm:slide-in-from-bottom-0",
+        "dark:bg-slate-900",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <DialogPrimitive.Close className="absolute top-4 right-4 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-slate-400 focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-slate-100 dark:focus:ring-slate-400 dark:focus:ring-offset-slate-900 dark:data-[state=open]:bg-slate-800">
+        <X className="h-4 w-4" />
+        <span className="sr-only">Close</span>
+      </DialogPrimitive.Close>
+    </DialogPrimitive.Content>
+  </DialogPortal>
+));
+DialogContent.displayName = DialogPrimitive.Content.displayName;
+
+const DialogHeader = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      "flex flex-col space-y-2 text-center sm:text-left",
+      className
+    )}
+    {...props}
+  />
+);
+DialogHeader.displayName = "DialogHeader";
+
+const DialogFooter = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
+      className
+    )}
+    {...props}
+  />
+);
+DialogFooter.displayName = "DialogFooter";
+
+const DialogTitle = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Title
+    ref={ref}
+    className={cn(
+      "text-lg font-semibold text-slate-900",
+      "dark:text-slate-50",
+      className
+    )}
+    {...props}
+  />
+));
+DialogTitle.displayName = DialogPrimitive.Title.displayName;
+
+const DialogDescription = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Description>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Description
+    ref={ref}
+    className={cn("text-sm text-slate-500", "dark:text-slate-400", className)}
+    {...props}
+  />
+));
+DialogDescription.displayName = DialogPrimitive.Description.displayName;
+
+export {
+  Dialog,
+  DialogTrigger,
+  DialogContent,
+  DialogHeader,
+  DialogFooter,
+  DialogTitle,
+  DialogDescription
+};

src/components/UI/Input.tsx

@@ -0,0 +1,24 @@
+import * as React from "react";
+
+import { cn } from "@core/utils/cn.js";
+
+export interface InputProps
+  extends React.InputHTMLAttributes<HTMLInputElement> {}
+
+const Input = React.forwardRef<HTMLInputElement, InputProps>(
+  ({ className, ...props }, ref) => {
+    return (
+      <input
+        className={cn(
+          "flex h-10 w-full rounded-md border border-slate-300 bg-transparent py-2 px-3 text-sm placeholder:text-slate-400 focus:outline-none focus:ring-2 focus:ring-slate-400 focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 dark:border-slate-700 dark:text-slate-50 dark:focus:ring-slate-400 dark:focus:ring-offset-slate-900",
+          className
+        )}
+        ref={ref}
+        {...props}
+      />
+    );
+  }
+);
+Input.displayName = "Input";
+
+export { Input };

src/components/UI/Label.tsx

@@ -0,0 +1,21 @@
+import * as React from "react";
+import * as LabelPrimitive from "@radix-ui/react-label";
+
+import { cn } from "@core/utils/cn.js";
+
+const Label = React.forwardRef<
+  React.ElementRef<typeof LabelPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <LabelPrimitive.Root
+    ref={ref}
+    className={cn(
+      "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
+      className
+    )}
+    {...props}
+  />
+));
+Label.displayName = LabelPrimitive.Root.displayName;
+
+export { Label };

src/components/UI/Menubar.tsx

@@ -0,0 +1,234 @@
+import * as React from "react";
+import * as MenubarPrimitive from "@radix-ui/react-menubar";
+import { Check, ChevronRight, Circle } from "lucide-react";
+
+import { cn } from "@core/utils/cn.js";
+
+const MenubarMenu = MenubarPrimitive.Menu;
+
+const MenubarGroup = MenubarPrimitive.Group;
+
+const MenubarPortal = MenubarPrimitive.Portal;
+
+const MenubarSub = MenubarPrimitive.Sub;
+
+const MenubarRadioGroup = MenubarPrimitive.RadioGroup;
+
+const Menubar = React.forwardRef<
+  React.ElementRef<typeof MenubarPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <MenubarPrimitive.Root
+    ref={ref}
+    className={cn(
+      "flex h-10 items-center space-x-1 rounded-md border border-slate-300 bg-white p-1 dark:border-slate-700 dark:bg-slate-800",
+      className
+    )}
+    {...props}
+  />
+));
+Menubar.displayName = MenubarPrimitive.Root.displayName;
+
+const MenubarTrigger = React.forwardRef<
+  React.ElementRef<typeof MenubarPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Trigger>
+>(({ className, ...props }, ref) => (
+  <MenubarPrimitive.Trigger
+    ref={ref}
+    className={cn(
+      "flex cursor-default select-none items-center rounded-[0.2rem] py-1.5 px-3 text-sm font-medium outline-none focus:bg-slate-100 data-[state=open]:bg-slate-100 dark:focus:bg-slate-700 dark:data-[state=open]:bg-slate-700",
+      className
+    )}
+    {...props}
+  />
+));
+MenubarTrigger.displayName = MenubarPrimitive.Trigger.displayName;
+
+const MenubarSubTrigger = React.forwardRef<
+  React.ElementRef<typeof MenubarPrimitive.SubTrigger>,
+  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.SubTrigger> & {
+    inset?: boolean;
+  }
+>(({ className, inset, children, ...props }, ref) => (
+  <MenubarPrimitive.SubTrigger
+    ref={ref}
+    className={cn(
+      "flex cursor-default select-none items-center rounded-sm py-1.5 px-2 text-sm font-medium outline-none focus:bg-slate-100 data-[state=open]:bg-slate-100 dark:focus:bg-slate-700 dark:data-[state=open]:bg-slate-700",
+      inset && "pl-8",
+      className
+    )}
+    {...props}
+  >
+    {children}
+    <ChevronRight className="ml-auto h-4 w-4" />
+  </MenubarPrimitive.SubTrigger>
+));
+MenubarSubTrigger.displayName = MenubarPrimitive.SubTrigger.displayName;
+
+const MenubarSubContent = React.forwardRef<
+  React.ElementRef<typeof MenubarPrimitive.SubContent>,
+  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.SubContent>
+>(({ className, ...props }, ref) => (
+  <MenubarPrimitive.SubContent
+    ref={ref}
+    className={cn(
+      "z-50 min-w-[8rem] overflow-hidden rounded-md border border-slate-100 bg-white p-1 shadow-md animate-in slide-in-from-left-1 dark:border-slate-700 dark:bg-slate-800",
+      className
+    )}
+    {...props}
+  />
+));
+MenubarSubContent.displayName = MenubarPrimitive.SubContent.displayName;
+
+const MenubarContent = React.forwardRef<
+  React.ElementRef<typeof MenubarPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Content>
+>(
+  (
+    { className, align = "start", alignOffset = -4, sideOffset = 8, ...props },
+    ref
+  ) => (
+    <MenubarPrimitive.Portal>
+      <MenubarPrimitive.Content
+        ref={ref}
+        align={align}
+        alignOffset={alignOffset}
+        sideOffset={sideOffset}
+        className={cn(
+          "z-50 min-w-[12rem] overflow-hidden rounded-md border border-slate-100 bg-white p-1 text-slate-700 shadow-md animate-in slide-in-from-top-1 dark:border-slate-800 dark:bg-slate-800 dark:text-slate-400",
+          className
+        )}
+        {...props}
+      />
+    </MenubarPrimitive.Portal>
+  )
+);
+MenubarContent.displayName = MenubarPrimitive.Content.displayName;
+
+const MenubarItem = React.forwardRef<
+  React.ElementRef<typeof MenubarPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Item> & {
+    inset?: boolean;
+  }
+>(({ className, inset, ...props }, ref) => (
+  <MenubarPrimitive.Item
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm py-1.5 px-2 text-sm font-medium outline-none focus:bg-slate-100 data-[disabled]:pointer-events-none data-[disabled]:opacity-50 dark:focus:bg-slate-700",
+      inset && "pl-8",
+      className
+    )}
+    {...props}
+  />
+));
+MenubarItem.displayName = MenubarPrimitive.Item.displayName;
+
+const MenubarCheckboxItem = React.forwardRef<
+  React.ElementRef<typeof MenubarPrimitive.CheckboxItem>,
+  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.CheckboxItem>
+>(({ className, children, checked, ...props }, ref) => (
+  <MenubarPrimitive.CheckboxItem
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm font-medium outline-none focus:bg-slate-100 data-[disabled]:pointer-events-none data-[disabled]:opacity-50 dark:focus:bg-slate-700",
+      className
+    )}
+    checked={checked}
+    {...props}
+  >
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <MenubarPrimitive.ItemIndicator>
+        <Check className="h-4 w-4" />
+      </MenubarPrimitive.ItemIndicator>
+    </span>
+    {children}
+  </MenubarPrimitive.CheckboxItem>
+));
+MenubarCheckboxItem.displayName = MenubarPrimitive.CheckboxItem.displayName;
+
+const MenubarRadioItem = React.forwardRef<
+  React.ElementRef<typeof MenubarPrimitive.RadioItem>,
+  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.RadioItem>
+>(({ className, children, ...props }, ref) => (
+  <MenubarPrimitive.RadioItem
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm font-medium outline-none focus:bg-slate-100 data-[disabled]:pointer-events-none data-[disabled]:opacity-50 dark:focus:bg-slate-700",
+      className
+    )}
+    {...props}
+  >
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <MenubarPrimitive.ItemIndicator>
+        <Circle className="h-2 w-2 fill-current" />
+      </MenubarPrimitive.ItemIndicator>
+    </span>
+    {children}
+  </MenubarPrimitive.RadioItem>
+));
+MenubarRadioItem.displayName = MenubarPrimitive.RadioItem.displayName;
+
+const MenubarLabel = React.forwardRef<
+  React.ElementRef<typeof MenubarPrimitive.Label>,
+  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Label> & {
+    inset?: boolean;
+  }
+>(({ className, inset, ...props }, ref) => (
+  <MenubarPrimitive.Label
+    ref={ref}
+    className={cn(
+      "px-2 py-1.5 text-sm font-semibold text-slate-900 dark:text-slate-300",
+      inset && "pl-8",
+      className
+    )}
+    {...props}
+  />
+));
+MenubarLabel.displayName = MenubarPrimitive.Label.displayName;
+
+const MenubarSeparator = React.forwardRef<
+  React.ElementRef<typeof MenubarPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <MenubarPrimitive.Separator
+    ref={ref}
+    className={cn("-mx-1 my-1 h-px bg-slate-100 dark:bg-slate-700", className)}
+    {...props}
+  />
+));
+MenubarSeparator.displayName = MenubarPrimitive.Separator.displayName;
+
+const MenubarShortcut = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLSpanElement>) => {
+  return (
+    <span
+      className={cn(
+        "ml-auto text-xs tracking-widest text-slate-500",
+        className
+      )}
+      {...props}
+    />
+  );
+};
+MenubarShortcut.displayname = "MenubarShortcut";
+
+export {
+  Menubar,
+  MenubarMenu,
+  MenubarTrigger,
+  MenubarContent,
+  MenubarItem,
+  MenubarSeparator,
+  MenubarLabel,
+  MenubarCheckboxItem,
+  MenubarRadioGroup,
+  MenubarRadioItem,
+  MenubarPortal,
+  MenubarSubContent,
+  MenubarSubTrigger,
+  MenubarGroup,
+  MenubarSub,
+  MenubarShortcut
+};

src/components/UI/Popover.tsx

@@ -0,0 +1,29 @@
+import * as React from "react";
+import * as PopoverPrimitive from "@radix-ui/react-popover";
+
+import { cn } from "@core/utils/cn.js";
+
+const Popover = PopoverPrimitive.Root;
+
+const PopoverTrigger = PopoverPrimitive.Trigger;
+
+const PopoverContent = React.forwardRef<
+  React.ElementRef<typeof PopoverPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>
+>(({ className, align = "center", sideOffset = 4, ...props }, ref) => (
+  <PopoverPrimitive.Portal>
+    <PopoverPrimitive.Content
+      ref={ref}
+      align={align}
+      sideOffset={sideOffset}
+      className={cn(
+        "z-50 w-72 rounded-md border border-slate-100 bg-white p-4 shadow-md outline-none animate-in data-[side=bottom]:slide-in-from-top-2 data-[side=top]:slide-in-from-bottom-2 dark:border-slate-800 dark:bg-slate-800",
+        className
+      )}
+      {...props}
+    />
+  </PopoverPrimitive.Portal>
+));
+PopoverContent.displayName = PopoverPrimitive.Content.displayName;
+
+export { Popover, PopoverTrigger, PopoverContent };

src/components/UI/Select.tsx

@@ -0,0 +1,111 @@
+import * as React from "react";
+import * as SelectPrimitive from "@radix-ui/react-select";
+import { Check, ChevronDown } from "lucide-react";
+
+import { cn } from "@core/utils/cn.js";
+
+const Select = SelectPrimitive.Root;
+
+const SelectGroup = SelectPrimitive.Group;
+
+const SelectValue = SelectPrimitive.Value;
+
+const SelectTrigger = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>
+>(({ className, children, ...props }, ref) => (
+  <SelectPrimitive.Trigger
+    ref={ref}
+    className={cn(
+      "border-slate-300 placeholder:text-slate-400 focus:ring-slate-400 dark:border-slate-700 dark:text-slate-50 dark:focus:ring-slate-400 dark:focus:ring-offset-slate-900 flex h-10 w-full items-center justify-between rounded-md border bg-transparent py-2 px-3 text-sm focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+      className
+    )}
+    {...props}
+  >
+    {children}
+    <ChevronDown className="h-4 w-4 opacity-50" />
+  </SelectPrimitive.Trigger>
+));
+SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
+
+const SelectContent = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>
+>(({ className, children, ...props }, ref) => (
+  <SelectPrimitive.Portal>
+    <SelectPrimitive.Content
+      ref={ref}
+      className={cn(
+        "border-slate-100 bg-white text-slate-700 dark:border-slate-800 dark:bg-slate-800 dark:text-slate-400 relative z-50 min-w-[8rem] overflow-hidden rounded-md border shadow-md animate-in fade-in-80",
+        className
+      )}
+      {...props}
+    >
+      <SelectPrimitive.Viewport className="p-1">
+        {children}
+      </SelectPrimitive.Viewport>
+    </SelectPrimitive.Content>
+  </SelectPrimitive.Portal>
+));
+SelectContent.displayName = SelectPrimitive.Content.displayName;
+
+const SelectLabel = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Label>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.Label
+    ref={ref}
+    className={cn(
+      "text-slate-900 dark:text-slate-300 py-1.5 pr-2 pl-8 text-sm font-semibold",
+      className
+    )}
+    {...props}
+  />
+));
+SelectLabel.displayName = SelectPrimitive.Label.displayName;
+
+const SelectItem = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item>
+>(({ className, children, ...props }, ref) => (
+  <SelectPrimitive.Item
+    ref={ref}
+    className={cn(
+      "focus:bg-slate-100 dark:focus:bg-slate-700 relative flex cursor-default select-none items-center rounded-sm py-1.5 pr-2 pl-8 text-sm font-medium outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className
+    )}
+    {...props}
+  >
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <SelectPrimitive.ItemIndicator>
+        <Check className="h-4 w-4" />
+      </SelectPrimitive.ItemIndicator>
+    </span>
+
+    <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
+  </SelectPrimitive.Item>
+));
+SelectItem.displayName = SelectPrimitive.Item.displayName;
+
+const SelectSeparator = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.Separator
+    ref={ref}
+    className={cn("bg-slate-100 dark:bg-slate-700 -mx-1 my-1 h-px", className)}
+    {...props}
+  />
+));
+SelectSeparator.displayName = SelectPrimitive.Separator.displayName;
+
+export {
+  Select,
+  SelectGroup,
+  SelectValue,
+  SelectTrigger,
+  SelectContent,
+  SelectLabel,
+  SelectItem,
+  SelectSeparator
+};

src/components/UI/Seperator.tsx

@@ -0,0 +1,29 @@
+import * as React from "react";
+import * as SeparatorPrimitive from "@radix-ui/react-separator";
+
+import { cn } from "@core/utils/cn.js";
+
+const Separator = React.forwardRef<
+  React.ElementRef<typeof SeparatorPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root>
+>(
+  (
+    { className, orientation = "horizontal", decorative = true, ...props },
+    ref
+  ) => (
+    <SeparatorPrimitive.Root
+      ref={ref}
+      decorative={decorative}
+      orientation={orientation}
+      className={cn(
+        "bg-slate-200 dark:bg-slate-700",
+        orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]",
+        className
+      )}
+      {...props}
+    />
+  )
+);
+Separator.displayName = SeparatorPrimitive.Root.displayName;
+
+export { Separator };

src/components/UI/Sidebar/SidebarSection.tsx

@@ -0,0 +1,17 @@
+import { H4 } from "../Typography/H4.js";
+
+export interface SidebarSectionProps {
+  label: string;
+  subheader?: string;
+  children: React.ReactNode;
+}
+
+export const SidebarSection = ({
+  label: title,
+  children
+}: SidebarSectionProps): JSX.Element => (
+  <div className="px-4 py-2">
+    <H4 className="mb-2 ml-2">{title}</H4>
+    <div className="space-y-1">{children}</div>
+  </div>
+);

src/components/UI/Sidebar/sidebarButton.tsx

@@ -0,0 +1,29 @@
+import type { LucideIcon } from "lucide-react";
+import { Button } from "../Button.js";
+
+export interface SidebarButtonProps {
+  label: string;
+  active?: boolean;
+  icon?: LucideIcon;
+  element?: JSX.Element;
+  onClick?: () => void;
+}
+
+export const SidebarButton = ({
+  label,
+  active,
+  icon: Icon,
+  element,
+  onClick
+}: SidebarButtonProps): JSX.Element => (
+  <Button
+    onClick={onClick}
+    variant={active ? "subtle" : "ghost"}
+    size="sm"
+    className="w-full justify-start gap-2"
+  >
+    {Icon && <Icon size={16} />}
+    {element && element}
+    {label}
+  </Button>
+);

src/components/UI/Switch.tsx

@@ -0,0 +1,27 @@
+import * as React from "react";
+import * as SwitchPrimitives from "@radix-ui/react-switch";
+
+import { cn } from "@core/utils/cn.js";
+
+const Switch = React.forwardRef<
+  React.ElementRef<typeof SwitchPrimitives.Root>,
+  React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root>
+>(({ className, ...props }, ref) => (
+  <SwitchPrimitives.Root
+    className={cn(
+      "peer inline-flex h-[24px] w-[44px] shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus:outline-none focus:ring-2 focus:ring-slate-400 focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=unchecked]:bg-slate-200 data-[state=checked]:bg-slate-900 dark:focus:ring-slate-400 dark:focus:ring-offset-slate-900 dark:data-[state=unchecked]:bg-slate-700 dark:data-[state=checked]:bg-slate-400",
+      className
+    )}
+    {...props}
+    ref={ref}
+  >
+    <SwitchPrimitives.Thumb
+      className={cn(
+        "pointer-events-none block h-5 w-5 rounded-full bg-white shadow-lg ring-0 transition-transform data-[state=unchecked]:translate-x-0 data-[state=checked]:translate-x-5"
+      )}
+    />
+  </SwitchPrimitives.Root>
+));
+Switch.displayName = SwitchPrimitives.Root.displayName;
+
+export { Switch };

src/components/UI/Tabs.tsx

@@ -0,0 +1,53 @@
+import * as React from "react";
+import * as TabsPrimitive from "@radix-ui/react-tabs";
+
+import { cn } from "@core/utils/cn.js";
+
+const Tabs = TabsPrimitive.Root;
+
+const TabsList = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.List>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.List
+    ref={ref}
+    className={cn(
+      "inline-flex items-center justify-center rounded-md bg-slate-100 p-1 dark:bg-slate-800",
+      className
+    )}
+    {...props}
+  />
+));
+TabsList.displayName = TabsPrimitive.List.displayName;
+
+const TabsTrigger = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.Trigger
+    className={cn(
+      "inline-flex min-w-[100px] items-center justify-center rounded-[0.185rem] px-3 py-1.5  text-sm font-medium text-slate-700 transition-all  disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-white data-[state=active]:text-slate-900 data-[state=active]:shadow-sm dark:text-slate-200 dark:data-[state=active]:bg-slate-900 dark:data-[state=active]:text-slate-100",
+      className
+    )}
+    {...props}
+    ref={ref}
+  />
+));
+TabsTrigger.displayName = TabsPrimitive.Trigger.displayName;
+
+const TabsContent = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.Content
+    className={cn(
+      "mt-2 rounded-md border border-slate-200 p-6 dark:border-slate-700",
+      className
+    )}
+    {...props}
+    ref={ref}
+  />
+));
+TabsContent.displayName = TabsPrimitive.Content.displayName;
+
+export { Tabs, TabsList, TabsTrigger, TabsContent };

src/components/UI/Toast.tsx

@@ -0,0 +1,128 @@
+import * as React from "react";
+import * as ToastPrimitives from "@radix-ui/react-toast";
+import { VariantProps, cva } from "class-variance-authority";
+import { X } from "lucide-react";
+
+import { cn } from "@core/utils/cn.js";
+
+const ToastProvider = ToastPrimitives.Provider;
+
+const ToastViewport = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitives.Viewport>,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Viewport>
+>(({ className, ...props }, ref) => (
+  <ToastPrimitives.Viewport
+    ref={ref}
+    className={cn(
+      "fixed top-0 z-50 flex max-h-screen w-full flex-col-reverse p-4 sm:top-auto sm:bottom-0 sm:right-0 sm:flex-col md:max-w-[420px]",
+      className
+    )}
+    {...props}
+  />
+));
+ToastViewport.displayName = ToastPrimitives.Viewport.displayName;
+
+const toastVariants = cva(
+  "data-[swipe=move]:transition-none grow-1 group relative pointer-events-auto flex w-full items-center justify-between space-x-4 overflow-hidden rounded-md border p-6 pr-8 shadow-lg transition-all data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full mt-4 data-[state=closed]:slide-out-to-right-full dark:border-slate-700 last:mt-0 sm:last:mt-4",
+  {
+    variants: {
+      variant: {
+        default:
+          "bg-white border-slate-200 dark:bg-slate-800 dark:border-slate-700",
+        destructive:
+          "group destructive bg-red-600 text-white border-red-600 dark:border-red-600"
+      }
+    },
+    defaultVariants: {
+      variant: "default"
+    }
+  }
+);
+
+const Toast = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitives.Root>,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Root> &
+    VariantProps<typeof toastVariants>
+>(({ className, variant, ...props }, ref) => {
+  return (
+    <ToastPrimitives.Root
+      ref={ref}
+      className={cn(toastVariants({ variant }), className)}
+      {...props}
+    />
+  );
+});
+Toast.displayName = ToastPrimitives.Root.displayName;
+
+const ToastAction = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitives.Action>,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Action>
+>(({ className, ...props }, ref) => (
+  <ToastPrimitives.Action
+    ref={ref}
+    className={cn(
+      "inline-flex h-8 shrink-0 items-center justify-center rounded-md border border-slate-200 bg-transparent px-3 text-sm font-medium transition-colors hover:bg-slate-100 focus:outline-none focus:ring-2 focus:ring-slate-400 focus:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 group-[.destructive]:border-red-100 group-[.destructive]:hover:border-slate-50 group-[.destructive]:hover:bg-red-100 group-[.destructive]:hover:text-red-600 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600 dark:border-slate-700 dark:text-slate-100 dark:hover:bg-slate-700 dark:hover:text-slate-100 dark:focus:ring-slate-400 dark:focus:ring-offset-slate-900 dark:data-[state=open]:bg-slate-800",
+      className
+    )}
+    {...props}
+  />
+));
+ToastAction.displayName = ToastPrimitives.Action.displayName;
+
+const ToastClose = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitives.Close>,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Close>
+>(({ className, ...props }, ref) => (
+  <ToastPrimitives.Close
+    ref={ref}
+    className={cn(
+      "absolute top-2 right-2 rounded-md p-1 text-slate-500 opacity-0 transition-opacity hover:text-slate-900 focus:opacity-100 focus:outline-none focus:ring-2 group-hover:opacity-100 group-[.destructive]:text-red-300 group-[.destructive]:hover:text-red-50 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600 dark:hover:text-slate-50",
+      className
+    )}
+    toast-close=""
+    {...props}
+  >
+    <X className="h-4 w-4" />
+  </ToastPrimitives.Close>
+));
+ToastClose.displayName = ToastPrimitives.Close.displayName;
+
+const ToastTitle = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitives.Title>,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Title>
+>(({ className, ...props }, ref) => (
+  <ToastPrimitives.Title
+    ref={ref}
+    className={cn("text-sm font-semibold", className)}
+    {...props}
+  />
+));
+ToastTitle.displayName = ToastPrimitives.Title.displayName;
+
+const ToastDescription = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitives.Description>,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Description>
+>(({ className, ...props }, ref) => (
+  <ToastPrimitives.Description
+    ref={ref}
+    className={cn("text-sm opacity-90", className)}
+    {...props}
+  />
+));
+ToastDescription.displayName = ToastPrimitives.Description.displayName;
+
+type ToastProps = React.ComponentPropsWithoutRef<typeof Toast>;
+
+type ToastActionElement = React.ReactElement<typeof ToastAction>;
+
+export {
+  type ToastProps,
+  type ToastActionElement,
+  ToastProvider,
+  ToastViewport,
+  Toast,
+  ToastTitle,
+  ToastDescription,
+  ToastClose,
+  ToastAction
+};

src/components/UI/Tooltip.tsx

@@ -0,0 +1,29 @@
+import * as React from "react";
+import * as TooltipPrimitive from "@radix-ui/react-tooltip";
+
+import { cn } from "@core/utils/cn.js";
+
+const TooltipProvider = TooltipPrimitive.Provider;
+
+const Tooltip = ({ ...props }) => <TooltipPrimitive.Root {...props} />;
+Tooltip.displayName = TooltipPrimitive.Tooltip.displayName;
+
+const TooltipTrigger = TooltipPrimitive.Trigger;
+
+const TooltipContent = React.forwardRef<
+  React.ElementRef<typeof TooltipPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
+>(({ className, sideOffset = 4, ...props }, ref) => (
+  <TooltipPrimitive.Content
+    ref={ref}
+    sideOffset={sideOffset}
+    className={cn(
+      "z-50 overflow-hidden rounded-md border border-slate-100 bg-white px-3 py-1.5 text-sm text-slate-700 shadow-md animate-in fade-in-50 data-[side=bottom]:slide-in-from-top-1 data-[side=top]:slide-in-from-bottom-1 data-[side=left]:slide-in-from-right-1 data-[side=right]:slide-in-from-left-1 dark:border-slate-800 dark:bg-slate-800 dark:text-slate-400",
+      className
+    )}
+    {...props}
+  />
+));
+TooltipContent.displayName = TooltipPrimitive.Content.displayName;
+
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };

src/components/UI/Typography/Blockquote.tsx

@@ -0,0 +1,9 @@
+export interface BlockquoteProps {
+  children: React.ReactNode;
+}
+
+export const BlockQuote = ({ children }: BlockquoteProps): JSX.Element => (
+  <blockquote className="mt-6 border-l-2 border-slate-300 pl-6 italic text-slate-800 dark:border-slate-600 dark:text-slate-200">
+    {children}
+  </blockquote>
+);

src/components/UI/Typography/Code.tsx

@@ -0,0 +1,9 @@
+export interface CodeProps {
+  children: React.ReactNode;
+}
+
+export const Code = ({ children }: CodeProps): JSX.Element => (
+  <code className="relative rounded bg-slate-100 py-[0.2rem] px-[0.3rem] font-mono text-sm font-semibold text-slate-900 dark:bg-slate-800 dark:text-slate-400">
+    {children}
+  </code>
+);

src/components/UI/Typography/H1.tsx

@@ -0,0 +1,9 @@
+export interface H1Props {
+  children: React.ReactNode;
+}
+
+export const H1 = ({ children }: H1Props): JSX.Element => (
+  <h1 className="scroll-m-20 text-4xl font-extrabold tracking-tight lg:text-5xl">
+    {children}
+  </h1>
+);

src/components/UI/Typography/H2.tsx

@@ -0,0 +1,9 @@
+export interface H2Props {
+  children: React.ReactNode;
+}
+
+export const H2 = ({ children }: H2Props): JSX.Element => (
+  <h2 className="scroll-m-20 border-b border-b-slate-200 pb-2 text-3xl font-semibold tracking-tight transition-colors first:mt-0 dark:border-b-slate-700">
+    {children}
+  </h2>
+);

src/components/UI/Typography/H3.tsx

@@ -0,0 +1,9 @@
+export interface H3Props {
+  children: React.ReactNode;
+}
+
+export const H3 = ({ children }: H3Props): JSX.Element => (
+  <h3 className="scroll-m-20 text-2xl font-semibold tracking-tight">
+    {children}
+  </h3>
+);

src/components/UI/Typography/H4.tsx

@@ -0,0 +1,17 @@
+import { cn } from "@app/core/utils/cn.js";
+
+export interface H4Props {
+  className?: string;
+  children: React.ReactNode;
+}
+
+export const H4 = ({ className, children }: H4Props): JSX.Element => (
+  <h4
+    className={cn(
+      "scroll-m-20 text-xl font-semibold tracking-tight",
+      className
+    )}
+  >
+    {children}
+  </h4>
+);

src/components/UI/Typography/Link.tsx

@@ -0,0 +1,15 @@
+export interface LinkProps {
+  href: string;
+  children: React.ReactNode;
+}
+
+export const Link = ({ href, children }: LinkProps): JSX.Element => (
+  <a
+    href={href}
+    target={"_blank"}
+    rel="noopener noreferrer"
+    className="font-medium text-slate-900 underline underline-offset-4 dark:text-slate-50"
+  >
+    {children}
+  </a>
+);

src/components/UI/Typography/P.tsx

@@ -0,0 +1,7 @@
+export interface PProps {
+  children: React.ReactNode;
+}
+
+export const P = ({ children }: PProps): JSX.Element => (
+  <p className="leading-7 [&:not(:first-child)]:mt-6">{children}</p>
+);

src/components/UI/Typography/Subtle.tsx

@@ -0,0 +1,7 @@
+export interface SubtleProps {
+  children: React.ReactNode;
+}
+
+export const Subtle = ({ children }: SubtleProps): JSX.Element => (
+  <p className="text-sm text-slate-500 dark:text-slate-400">{children}</p>
+);

src/components/Widgets/BatteryWidget.tsx

@@ -1,77 +0,0 @@
-import { useEffect, useState } from "react";
-import prettyMilliseconds from "pretty-ms";
-import { useDevice } from "@core/providers/useDevice.js";
-import { Battery100Icon, ClockIcon } from "@heroicons/react/24/outline";
-
-export interface BatteryWidgetProps {
-  batteryLevel: number;
-  voltage: number;
-}
-
-export const BatteryWidget = ({
-  batteryLevel,
-  voltage
-}: BatteryWidgetProps): JSX.Element => {
-  const { nodes, hardware } = useDevice();
-
-  const [timeRemaining, setTimeRemaining] = useState("Unknown");
-
-  useEffect(() => {
-    const stats = nodes.find(
-      (n) => n.data.num === hardware.myNodeNum
-    )?.deviceMetrics;
-
-    if (stats) {
-      let currentStat: number | undefined = undefined;
-      let currentTime = new Date();
-      let previousStat: number | undefined = undefined;
-      let previousTime = new Date();
-      for (const stat of [...stats].reverse()) {
-        if (stat.metric.batteryLevel) {
-          if (!currentStat) {
-            currentStat = stat.metric.batteryLevel;
-            currentTime = stat.timestamp;
-          } else {
-            previousStat = stat.metric.batteryLevel;
-            previousTime = stat.timestamp;
-            break;
-          }
-        }
-      }
-
-      if (currentStat && previousStat) {
-        const timeDiff = currentTime.getTime() - previousTime.getTime();
-        const statDiff = Math.abs(currentStat - previousStat);
-        if (statDiff !== 0) {
-          //convert to ms/%
-          const msPerPercent = timeDiff / statDiff;
-          const formatted = prettyMilliseconds(
-            (100 - currentStat) * msPerPercent
-          );
-          setTimeRemaining(formatted);
-        }
-      } else setTimeRemaining("Unknown");
-    }
-  }, [hardware.myNodeNum, nodes]);
-
-  return (
-    <div className="flex gap-3 overflow-hidden rounded-lg bg-backgroundPrimary p-3 text-textSecondary">
-      <div className="rounded-md bg-accent p-3 text-textPrimary">
-        <Battery100Icon className="h-6" />
-      </div>
-      <div>
-        <p className="truncate text-sm font-medium">Battery State</p>
-        <div className="flex gap-1">
-          <p className="text-xl font-semibold">{batteryLevel}%</p>
-          <div className="flex text-sm font-semibold">
-            <ClockIcon
-              className="h-5 w-5 flex-shrink-0 self-center"
-              aria-hidden="true"
-            />
-            <span className="my-auto">{timeRemaining}</span>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-};

src/components/Widgets/DeviceWidget.tsx

@@ -1,39 +0,0 @@
-import { Button } from "@components/form/Button.js";
-import { Hashicon } from "@emeraldpay/hashicon-react";
-import { XCircleIcon } from "@heroicons/react/24/outline";
-
-export interface DeviceWidgetProps {
-  name: string;
-  nodeNum: string;
-  disconnected: boolean;
-  disconnect: () => void;
-  reconnect: () => void;
-}
-
-export const DeviceWidget = ({
-  name,
-  nodeNum,
-  disconnected,
-  disconnect,
-  reconnect
-}: DeviceWidgetProps): JSX.Element => {
-  return (
-    <div className="relative flex shrink-0 flex-col overflow-hidden rounded-md text-sm text-textPrimary">
-      <div className="flex bg-backgroundPrimary p-3">
-        <div>
-          <Hashicon size={96} value={nodeNum} />
-        </div>
-        <div className="flex w-full flex-col">
-          <span className="ml-auto whitespace-nowrap text-xl font-bold">
-            {name}
-          </span>
-          <div className="my-auto ml-auto">
-            <Button onClick={disconnected ? reconnect : disconnect} size="sm">
-              <span>{disconnected ? "Reconnect" : "Disconnect"}</span>
-            </Button>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-};

src/components/Widgets/PeersWidget.tsx

@@ -1,44 +0,0 @@
-import { useDevice } from "@core/providers/useDevice.js";
-import { IconButton } from "@components/form/IconButton.js";
-import { Mono } from "@components/generic/Mono.js";
-import {
-  EllipsisHorizontalIcon,
-  UserGroupIcon
-} from "@heroicons/react/24/outline";
-import type { Protobuf } from "@meshtastic/meshtasticjs";
-
-export interface PeersWidgetProps {
-  peers: Protobuf.NodeInfo[];
-}
-
-export const PeersWidget = ({ peers }: PeersWidgetProps): JSX.Element => {
-  const { setActivePage } = useDevice();
-
-  return (
-    <div className="flex gap-3 overflow-hidden rounded-lg bg-backgroundPrimary p-3 text-textSecondary">
-      <div className="rounded-md bg-accent p-3">
-        <UserGroupIcon className="h-6 text-textPrimary" />
-      </div>
-      <div>
-        <p className="truncate text-sm font-medium">Peers</p>
-        <div className="flex gap-1">
-          {peers.length > 0 ? (
-            <p className="text-lg font-semibold">
-              {`${peers.length} ${peers.length > 1 ? "Peers" : "Peer"}`}
-            </p>
-          ) : (
-            <Mono className="m-auto">None Discovered.</Mono>
-          )}
-        </div>
-      </div>
-      <IconButton
-        className="my-auto ml-auto"
-        size="sm"
-        onClick={() => {
-          setActivePage("peers");
-        }}
-        icon={<EllipsisHorizontalIcon className="h-4" />}
-      />
-    </div>
-  );
-};

src/components/Widgets/PositionWidget.tsx

@@ -1,21 +0,0 @@
-import { MapPinIcon } from "@heroicons/react/24/outline";
-
-export interface PositionWidgetProps {
-  grid: string;
-}
-
-export const PositionWidget = ({ grid }: PositionWidgetProps): JSX.Element => {
-  return (
-    <div className="flex gap-3 overflow-hidden rounded-lg bg-backgroundPrimary p-3 text-textSecondary">
-      <div className="rounded-md bg-accent p-3 text-textPrimary">
-        <MapPinIcon className="text-white h-6" />
-      </div>
-      <div>
-        <p className="truncate text-sm font-medium">Current Location</p>
-        <div className="flex gap-1">
-          <p className="text-lg font-semibold">{grid}</p>
-        </div>
-      </div>
-    </div>
-  );
-};

src/components/form/BitwiseSelect.tsx

@@ -2,7 +2,7 @@ import React, { useEffect, useState } from "react";
 
 import { bitwiseDecode, bitwiseEncode, enumLike } from "@core/utils/bitwise.js";
 import { InfoWrapper } from "@components/form/InfoWrapper.js";
-import { Listbox } from "@headlessui/react";
+// import { Listbox } from "@headlessui/react";
 import { Protobuf } from "@meshtastic/meshtasticjs";
 
 export interface BitwiseSelectProps {
@@ -50,7 +50,7 @@ export const BitwiseSelect = ({
 
   return (
     <InfoWrapper label={label} description={description} error={error}>
-      <Listbox
+      {/* <Listbox
         value={bitwiseDecode(selected, decodeEnun)}
         onChange={(value) => {
           onChange(bitwiseEncode(value));
@@ -71,7 +71,7 @@ export const BitwiseSelect = ({
             </Listbox.Option>
           ))}
         </Listbox.Options>
-      </Listbox>
+      </Listbox> */}
     </InfoWrapper>
   );
 };

src/components/form/Button.tsx

@@ -1,35 +0,0 @@
-import type { ButtonHTMLAttributes, ComponentType, SVGProps } from "react";
-
-export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
-  size?: "sm" | "md" | "lg";
-}
-
-export const Button = ({
-  size = "md",
-  children,
-  disabled,
-  className,
-  ...rest
-}: ButtonProps): JSX.Element => {
-  return (
-    <button
-      className={`flex w-full select-none rounded-md bg-accentMuted px-3 text-textPrimary hover:brightness-hover focus:outline-none active:brightness-press ${
-        size === "sm"
-          ? "h-8 text-sm"
-          : size === "md"
-          ? "h-10 text-sm"
-          : "h-10 text-base"
-      } ${
-        disabled
-          ? "cursor-not-allowed text-textSecondary brightness-disabled hover:brightness-disabled"
-          : ""
-      } ${className}`}
-      disabled={disabled}
-      {...rest}
-    >
-      <div className="m-auto flex shrink-0 items-center gap-2 font-medium">
-        {children}
-      </div>
-    </button>
-  );
-};

src/components/form/Form.tsx

@@ -1,22 +0,0 @@
-import type { FormEvent, HTMLProps } from "react";
-
-export interface FormProps extends HTMLProps<HTMLFormElement> {
-  onSubmit?: (event: FormEvent<HTMLFormElement>) => Promise<void>;
-}
-
-export const Form = ({
-  children,
-  onSubmit,
-  ...props
-}: FormProps): JSX.Element => {
-  return (
-    <form
-      className="w-full rounded-md bg-backgroundSecondary px-2"
-      onSubmit={onSubmit}
-      onChange={onSubmit}
-      {...props}
-    >
-      <div className="flex flex-col gap-3 p-4">{children}</div>
-    </form>
-  );
-};

src/components/form/IconButton.tsx

@@ -1,31 +0,0 @@
-import type { ButtonHTMLAttributes } from "react";
-
-export interface IconButtonProps
-  extends ButtonHTMLAttributes<HTMLButtonElement> {
-  size?: "sm" | "md" | "lg";
-  icon?: JSX.Element;
-}
-
-export const IconButton = ({
-  size = "md",
-  icon,
-  disabled,
-  className,
-  ...rest
-}: IconButtonProps): JSX.Element => {
-  return (
-    <button
-      className={`flex rounded-md bg-accentMuted text-textPrimary hover:brightness-hover focus:outline-none active:brightness-press ${
-        size === "sm" ? "h-8 w-8" : size === "md" ? "h-10 w-10" : "h-12 w-12"
-      } ${
-        disabled
-          ? "cursor-not-allowed text-textSecondary brightness-disabled hover:brightness-disabled"
-          : ""
-      } ${className ?? ""}`}
-      disabled={disabled}
-      {...rest}
-    >
-      <div className="m-auto">{icon}</div>
-    </button>
-  );
-};

src/components/form/InfoWrapper.tsx

@@ -1,4 +1,4 @@
-import { ExclamationCircleIcon } from "@heroicons/react/24/outline";
+import { AlertCircleIcon } from "lucide-react";
 import type { ReactNode } from "react";
 
 export interface InfoWrapperProps {
@@ -26,13 +26,13 @@ export const InfoWrapper = ({
       {children}
       {error && (
         <div className="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3">
-          <ExclamationCircleIcon className="text-red-500 h-5 w-5" />
+          <AlertCircleIcon size={16} className="text-red-500" />
         </div>
       )}
       {description && (
         <p className="mt-2 text-sm text-textSecondary">{description}</p>
       )}
-      {error && <p className="text-red-600 mt-2 text-sm">{error}</p>}
+      {error && <p className="mt-2 text-sm text-red-600">{error}</p>}
     </div>
   );
 };

src/components/form/Input.tsx

@@ -1,6 +1,6 @@
 import { forwardRef, InputHTMLAttributes } from "react";
 import { InfoWrapper, InfoWrapperProps } from "@components/form/InfoWrapper.js";
-import { ExclamationCircleIcon } from "@heroicons/react/24/outline";
+import { AlertCircleIcon } from "lucide-react";
 
 export interface InputProps
   extends InputHTMLAttributes<HTMLInputElement>,
@@ -63,7 +63,7 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(function Input(
         )}
         {error && (
           <div className="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3">
-            <ExclamationCircleIcon className="text-red-500 h-5 w-5" />
+            <AlertCircleIcon size={16} className="text-red-500" />
           </div>
         )}
       </div>

src/components/form/Select.tsx

@@ -1,61 +0,0 @@
-import { forwardRef, SelectHTMLAttributes } from "react";
-
-import { InfoWrapper, InfoWrapperProps } from "@components/form/InfoWrapper.js";
-
-export interface SelectProps
-  extends SelectHTMLAttributes<HTMLSelectElement>,
-    Omit<InfoWrapperProps, "children"> {
-  options?: string[];
-  action?: {
-    icon: JSX.Element;
-    action: () => void;
-  };
-}
-
-export const Select = forwardRef<HTMLSelectElement, SelectProps>(function Input(
-  {
-    label,
-    description,
-    options,
-    action,
-    disabled,
-    error,
-    children,
-    ...rest
-  }: SelectProps,
-  ref
-) {
-  return (
-    <InfoWrapper label={label} description={description} error={error}>
-      <div className="flex rounded-md">
-        <select
-          ref={ref}
-          className={`flex h-10 w-full rounded-md border-transparent bg-backgroundPrimary px-3 text-sm text-textPrimary focus:border-transparent focus:outline-none focus:ring-2 focus:ring-accent ${
-            action ? "rounded-r-none" : ""
-          } ${
-            disabled
-              ? "cursor-not-allowed text-textSecondary brightness-disabled hover:brightness-disabled"
-              : ""
-          }`}
-          disabled={disabled}
-          {...rest}
-        >
-          {options &&
-            options.map((option, index) => (
-              <option key={index}>{option}</option>
-            ))}
-          {children}
-        </select>
-        {action && (
-          <button
-            type="button"
-            onClick={action.action}
-            className="relative -ml-px inline-flex items-center space-x-2 rounded-r-md bg-backgroundPrimary px-4 py-2 text-sm font-medium text-textSecondary brightness-hover hover:brightness-hover focus:outline-none focus:ring-2 focus:ring-accent active:brightness-press"
-          >
-            {action.icon}
-          </button>
-        )}
-      </div>
-    </InfoWrapper>
-  );
-});

src/components/form/Toggle.tsx

@@ -1,11 +1,11 @@
-import { Switch } from "@headlessui/react";
+import { Switch } from "../UI/Switch.js";
+import { InfoWrapper } from "./InfoWrapper.js";
 
 export interface ToggleProps {
   checked: boolean;
   label?: string;
   description?: string;
   disabled?: boolean;
-  className?: string;
   onChange?: (checked: boolean) => void;
 }
 
@@ -14,44 +14,15 @@ export const Toggle = ({
   label,
   description,
   disabled,
-  className,
   onChange
 }: ToggleProps): JSX.Element => {
   return (
-    <Switch.Group
-      as="div"
-      className={`flex items-center justify-between ${className}`}
-    >
-      <span className="flex flex-grow flex-col">
-        {label && (
-          <Switch.Label
-            as="span"
-            className="block text-sm font-medium text-textPrimary"
-            passive
-          >
-            {label}
-          </Switch.Label>
-        )}
-        {description && (
-          <Switch.Description as="span" className="text-sm text-textSecondary">
-            {description}
-          </Switch.Description>
-        )}
-      </span>
+    <InfoWrapper label={label} description={description}>
       <Switch
         checked={checked}
         disabled={disabled}
-        onChange={onChange}
-        className={`relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-accent ${
-          checked ? "bg-accent" : "bg-backgroundPrimary"
-        } ${disabled ? "bg-orange-200 cursor-not-allowed" : ""}`}
-      >
-        <span
-          className={`pointer-events-none inline-block h-5 w-5 transform rounded-full bg-backgroundSecondary ring-0 transition duration-200 ease-in-out ${
-            checked ? "translate-x-5" : "translate-x-0"
-          }`}
-        />
-      </Switch>
-    </Switch.Group>
+        onCheckedChange={onChange}
+      />
+    </InfoWrapper>
   );
 };

src/components/generic/Dialog.tsx

@@ -1,48 +0,0 @@
-import { IconButton } from "@components/form/IconButton.js";
-import { Dialog as DialogUI } from "@headlessui/react";
-import { XMarkIcon } from "@heroicons/react/24/outline";
-import { ThemeController } from "@components/generic/ThemeController.js";
-import { Blur } from "@components/generic/Blur.js";
-import type { ReactNode } from "react";
-
-export interface DialogProps {
-  title: string;
-  description: string;
-  isOpen: boolean;
-  close: () => void;
-  children: ReactNode;
-}
-
-export const Dialog = ({
-  title,
-  description,
-  isOpen,
-  close,
-  children
-}: DialogProps): JSX.Element => {
-  return (
-    <DialogUI open={isOpen} onClose={close}>
-      <ThemeController>
-        <Blur />
-        <div className="fixed inset-0 flex items-center justify-center p-4">
-          <DialogUI.Panel>
-            <div className="flex bg-backgroundPrimary px-4 py-5 sm:px-6">
-              <div>
-                <h1 className="text-lg font-bold text-textPrimary">{title}</h1>
-                <h5 className="text-sm text-textSecondary">{description}</h5>
-              </div>
-              <IconButton
-                onClick={close}
-                className="my-auto ml-auto"
-                size="sm"
-                icon={<XMarkIcon className="h-4" />}
-              />
-            </div>
-
-            <div className="bg-backgroundSecondary p-4">{children}</div>
-          </DialogUI.Panel>
-        </div>
-      </ThemeController>
-    </DialogUI>
-  );
-};

src/components/generic/TabbedContent.tsx

@@ -1,97 +0,0 @@
-import { Fragment } from "react";
-import { Mono } from "@components/generic/Mono";
-import { Tab } from "@headlessui/react";
-
-export interface TabType {
-  label: string;
-  icon?: JSX.Element;
-  element: () => JSX.Element;
-  disabled?: boolean;
-  disabledMessage?: string;
-  disabledLink?: string;
-}
-
-export interface TabbedCOntentAction {
-  icon: JSX.Element;
-  action: () => void;
-}
-
-export interface TabbedContentProps {
-  tabs: TabType[];
-  actions?: TabbedCOntentAction[];
-}
-
-export const TabbedContent = ({
-  tabs,
-  actions
-}: TabbedContentProps): JSX.Element => {
-  return (
-    <Tab.Group as="div" className="flex flex-grow flex-col">
-      <Tab.List className="flex bg-backgroundPrimary">
-        {tabs.map((entry, index) => (
-          <Tab key={index} disabled={entry.disabled}>
-            {({ selected }) => (
-              <div
-                className={`flex h-10 gap-3 truncate border-b-4 px-3 text-sm font-medium ${
-                  selected
-                    ? "border-accent text-textPrimary"
-                    : "border-backgroundPrimary text-textSecondary hover:text-textPrimary"
-                } ${
-                  entry.disabled
-                    ? "cursor-not-allowed hover:text-textSecondary"
-                    : "cursor-pointer bg-backgroundPrimary hover:brightness-hover active:brightness-press"
-                }
-                   `}
-              >
-                {entry.icon && (
-                  <div className="text-slate-500 m-auto">{entry.icon}</div>
-                )}
-                <span className="m-auto">{entry.label}</span>
-              </div>
-            )}
-          </Tab>
-        ))}
-        <div className="ml-auto flex">
-          {actions?.map((action, index) => (
-            <div
-              key={index}
-              className="my-auto cursor-pointer bg-backgroundPrimary p-3 text-textSecondary hover:brightness-hover active:brightness-press"
-              onClick={action.action}
-            >
-              {action.icon}
-            </div>
-          ))}
-        </div>
-      </Tab.List>
-      <Tab.Panels as={Fragment}>
-        {tabs.map((entry, index) => (
-          <Tab.Panel key={index} className="m-2 flex flex-grow">
-            {!entry.disabled ? (
-              <entry.element />
-            ) : (
-              <div>
-                <Mono>
-                  {entry.disabledMessage || "This tab is disabled"}.{" "}
-                  {entry.disabledLink && (
-                    <>
-                      Click{" "}
-                      <a
-                        className="underline"
-                        target="_blank"
-                        rel="noreferrer"
-                        href={entry.disabledLink}
-                      >
-                        here
-                      </a>{" "}
-                      for more information.
-                    </>
-                  )}
-                </Mono>
-              </div>
-            )}
-          </Tab.Panel>
-        ))}
-      </Tab.Panels>
-    </Tab.Group>
-  );
-};

src/components/generic/Table/index.tsx

@@ -1,4 +1,4 @@
-import { ChevronUpIcon } from "@heroicons/react/24/outline";
+import { ChevronUpIcon } from "lucide-react";
 
 export interface TableProps {
   headings: Heading[];
@@ -28,7 +28,9 @@ export const Table = ({ headings, rows }: TableProps): JSX.Element => {
             >
               <div className="flex gap-2">
                 {heading.title}
-                {heading.sortable && <ChevronUpIcon className="my-auto h-3" />}
+                {heading.sortable && (
+                  <ChevronUpIcon size={16} className="my-auto" />
+                )}
               </div>
             </th>
           ))}

src/components/generic/VerticalTabbedContent.tsx

@@ -1,49 +0,0 @@
-import { Fragment } from "react";
-import { Mono } from "@components/generic/Mono";
-import { Tab } from "@headlessui/react";
-
-export interface TabType {
-  label: string;
-  element: () => JSX.Element;
-  disabled?: boolean;
-}
-
-export interface TabbedContentProps {
-  tabs: TabType[];
-}
-
-export const VerticalTabbedContent = ({
-  tabs
-}: TabbedContentProps): JSX.Element => {
-  return (
-    <Tab.Group as="div" className="flex w-full gap-3">
-      <Tab.List className="flex w-44 flex-col">
-        {tabs.map((tab, 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"
-                }`}
-              >
-                {tab.label}
-                <span className="ml-auto rounded-full bg-accent px-3 text-textPrimary">
-                  3
-                </span>
-              </div>
-            )}
-          </Tab>
-        ))}
-      </Tab.List>
-      <Tab.Panels as={Fragment}>
-        {tabs.map((tab, index) => (
-          <Tab.Panel key={index} as={Fragment}>
-            <tab.element />
-          </Tab.Panel>
-        ))}
-      </Tab.Panels>
-    </Tab.Group>
-  );
-};