clenup import paths

src/App.tsx

@@ -5,17 +5,16 @@ import { MapProvider } from "react-map-gl";
 
 import { useAppStore } from "@app/core/stores/appStore.js";
 import { DeviceWrapper } from "@app/DeviceWrapper.js";
+import { PageRouter } from "@app/PageRouter.js";
+import { CommandPalette } from "@components/CommandPalette/Index.js";
+import { DeviceSelector } from "@components/DeviceSelector.js";
+import { DialogManager } from "@components/Dialog/DialogManager.js";
+import { Drawer } from "@components/Drawer/index.js";
+import { NewDevice } from "@components/NewDevice.js";
+import { PageNav } from "@components/PageNav.js";
+import { Sidebar } from "@components/Sidebar.js";
 import { useDeviceStore } from "@core/stores/deviceStore.js";
 
-import { CommandPalette } from "./components/CommandPalette/Index.js";
-import { DeviceSelector } from "./components/DeviceSelector.js";
-import { DialogManager } from "./components/Dialog/DialogManager.js";
-import { Drawer } from "./components/Drawer/index.js";
-import { NewDevice } from "./components/NewDevice.js";
-import { PageNav } from "./components/PageNav.js";
-import { Sidebar } from "./components/Sidebar.js";
-import { PageRouter } from "./PageRouter.js";
-
 export const App = (): JSX.Element => {
   const { getDevice } = useDeviceStore();
   const { selectedDevice } = useAppStore();

src/PageRouter.tsx

@@ -5,11 +5,10 @@ import { ChannelsPage } from "@pages/Channels.js";
 import { ConfigPage } from "@pages/Config/index.js";
 import { ExtensionsPage } from "@pages/Extensions/Index.js";
 import { InfoPage } from "@pages/Info.js";
+import { LogsPage } from "@pages/Logs.js";
 import { MapPage } from "@pages/Map.js";
 import { MessagesPage } from "@pages/Messages.js";
-
+import { PeersPage } from "@pages/Peers.js";
-import { LogsPage } from "./pages/Logs.js";
-import { PeersPage } from "./pages/Peers.js";
 
 export const PageRouter = (): JSX.Element => {
   const { activePage } = useDevice();

src/components/Card.tsx

@@ -1,18 +0,0 @@
-import type React from "react";
-
-export const Card = ({
-  children,
-  className,
-  ...rest
-}: JSX.IntrinsicElements["div"]): JSX.Element => {
-  return (
-    <div
-      className={`flex overflow-hidden rounded-md bg-white text-sm text-black shadow-md ${
-        className ?? ""
-      }`}
-      {...rest}
-    >
-      {children}
-    </div>
-  );
-};

src/components/CommandPalette/GroupView.tsx

@@ -1,10 +1,9 @@
 import type React from "react";
 
+import type { Group } from "@components/CommandPalette/Index.js";
 import { Combobox } from "@headlessui/react";
 import { ChevronRightIcon } from "@heroicons/react/24/outline";
 
-import type { Group } from "./Index.js";
-
 export interface GroupViewProps {
   group: Group;
 }

src/components/CommandPalette/Index.tsx

@@ -18,6 +18,11 @@ import { toast } from "react-hot-toast";
 
 import { useDevice } from "@app/core/providers/useDevice.js";
 import { useAppStore } from "@app/core/stores/appStore.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 { Combobox, Dialog, Transition } from "@headlessui/react";
 import {
   ArchiveBoxXMarkIcon,
@@ -43,12 +48,6 @@ import {
   XCircleIcon
 } from "@heroicons/react/24/outline";
 
-import { GroupView } from "./GroupView.js";
-import { NoResults } from "./NoResults.js";
-import { PaletteTransition } from "./PaletteTransition.js";
-import { SearchBox } from "./SearchBox.js";
-import { SearchResult } from "./SearchResult.js";
-
 export interface Group {
   name: string;
   icon: (props: React.ComponentProps<"svg">) => JSX.Element;

src/components/CommandPalette/NoResults.tsx

@@ -1,9 +1,8 @@
 import type React from "react";
 
+import { Mono } from "@components/generic/Mono.js";
 import { CommandLineIcon } from "@heroicons/react/24/outline";
 
-import { Mono } from "../Mono.js";
-
 export const NoResults = (): JSX.Element => {
   return (
     <div className="py-14 px-14 text-center">

src/components/CommandPalette/SearchResult.tsx

@@ -1,10 +1,9 @@
 import type React from "react";
 
+import type { Group } from "@components/CommandPalette/Index.js";
 import { Combobox } from "@headlessui/react";
 import { ChevronRightIcon } from "@heroicons/react/24/outline";
 
-import type { Group } from "./Index.js";
-
 export interface SearchResultProps {
   group: Group;
 }

src/components/DeviceSelector.tsx

@@ -2,11 +2,10 @@ import type React from "react";
 
 import { useAppStore } from "@app/core/stores/appStore.js";
 import { useDeviceStore } from "@app/core/stores/deviceStore.js";
+import { Mono } from "@components/generic/Mono.js";
 import { Hashicon } from "@emeraldpay/hashicon-react";
 import { CommandLineIcon, PlusIcon } from "@heroicons/react/24/outline";
 
-import { Mono } from "./Mono.js";
-
 export const DeviceSelector = (): JSX.Element => {
   const { getDevices } = useDeviceStore();
   const { selectedDevice, setSelectedDevice } = useAppStore();

src/components/Dialog/DialogManager.tsx

@@ -1,8 +1,7 @@
 import type React from "react";
 
 import { useDevice } from "@app/core/providers/useDevice.js";
-
+import { QRDialog } from "@components/Dialog/QRDialog.js";
-import { QRDialog } from "./QRDialog.js";
 
 export const DialogManager = (): JSX.Element => {
   const { channels, config, QRDialogOpen, setQRDialogOpen } = useDevice();

src/components/Dialog/ImportDialog.tsx

@@ -5,14 +5,13 @@ 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 { IconButton } from "@components/form/IconButton.js";
+import { Input } from "@components/form/Input.js";
 import { Dialog } from "@headlessui/react";
 import { ClipboardIcon, XMarkIcon } from "@heroicons/react/24/outline";
 import { Protobuf } from "@meshtastic/meshtasticjs";
 
-import { Checkbox } from "../form/Checkbox.js";
-import { Input } from "../form/Input.js";
-import { IconButton } from "../IconButton.js";
-
 export interface ImportDialogProps {
   isOpen: boolean;
   close: () => void;

src/components/Dialog/QRDialog.tsx

@@ -5,14 +5,13 @@ 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 { IconButton } from "@components/form/IconButton.js";
+import { Input } from "@components/form/Input.js";
 import { Dialog } from "@headlessui/react";
 import { ClipboardIcon, XMarkIcon } from "@heroicons/react/24/outline";
 import { Protobuf } from "@meshtastic/meshtasticjs";
 
-import { Checkbox } from "../form/Checkbox.js";
-import { Input } from "../form/Input.js";
-import { IconButton } from "../IconButton.js";
-
 export interface QRDialogProps {
   isOpen: boolean;
   close: () => void;

src/components/Drawer/index.tsx

@@ -1,13 +1,12 @@
 import type React from "react";
 import { useState } from "react";
 
+import { Metrics } from "@components/Drawer/Metrics.js";
+import { Notifications } from "@components/Drawer/Notifications.js";
+import type { TabType } from "@components/generic/TabbedContent.js";
 import { Tab } from "@headlessui/react";
 import { ChevronDownIcon, ChevronUpIcon } from "@heroicons/react/24/outline";
 
-import type { TabType } from "../layout/page/TabbedContent.js";
-import { Metrics } from "./Metrics.js";
-import { Notifications } from "./Notifications.js";
-
 export const Drawer = (): JSX.Element => {
   const [drawerOpen, setDrawerOpen] = useState(false);
 
@@ -25,7 +24,7 @@ export const Drawer = (): JSX.Element => {
                 onClick={() => {
                   setDrawerOpen(true);
                 }}
-                className={`flex h-full cursor-pointer px-1 first:pl-2 last:pr-2 hover:bg-orange-300 ${
+                className={`flex h-full cursor-pointer px-1 first:pl-2 last:pr-2 hover:bg-orange-200 hover:text-orange-700 ${
                   selected ? "bg-orange-500 text-white" : "bg-white text-black"
                 }`}
               >

src/components/Dropdown.tsx

@@ -1,50 +0,0 @@
-import type React from "react";
-
-import { Disclosure } from "@headlessui/react";
-import { ChevronDownIcon, ChevronUpIcon } from "@heroicons/react/24/outline";
-
-import { Mono } from "./Mono.js";
-
-export interface DropdownProps {
-  title: string;
-  stat?: number;
-  icon: JSX.Element;
-  defaultOpen?: boolean;
-  children: React.ReactNode;
-}
-
-export const Dropdown = ({
-  title,
-  stat,
-  icon,
-  defaultOpen,
-  children
-}: DropdownProps): JSX.Element => {
-  return (
-    <Disclosure defaultOpen={defaultOpen}>
-      {({ open }) => (
-        <>
-          <Disclosure.Button className="group flex h-8 justify-between bg-slate-100 px-2 hover:bg-slate-200">
-            <div className="my-auto flex gap-2 text-slate-700">
-              <div className="my-auto">{icon}</div>
-              <span className="text-lg font-medium">{title}</span>
-              {stat !== undefined && (
-                <span className="my-auto flex rounded-full bg-slate-200 px-3 py-0.5 group-hover:bg-slate-300">
-                  <Mono>{stat}</Mono>
-                </span>
-              )}
-            </div>
-            <div className="my-auto text-slate-600">
-              {open ? (
-                <ChevronUpIcon className="h-5" />
-              ) : (
-                <ChevronDownIcon className="h-5" />
-              )}
-            </div>
-          </Disclosure.Button>
-          <Disclosure.Panel>{children}</Disclosure.Panel>
-        </>
-      )}
-    </Disclosure>
-  );
-};

src/components/NewDevice.tsx

@@ -1,14 +1,14 @@
-import React, { useState } from "react";
+import React from "react";
 
 import { FiBluetooth, FiTerminal, FiWifi } from "react-icons/fi";
 
-import { TabbedContent, TabType } from "./layout/page/TabbedContent.js";
+import { TabbedContent, TabType } from "@components/generic/TabbedContent.js";
-import { BLE } from "./PageComponents/Connect/BLE.js";
+import { BLE } from "@components/PageComponents/Connect/BLE.js";
-import { HTTP } from "./PageComponents/Connect/HTTP.js";
+import { HTTP } from "@components/PageComponents/Connect/HTTP.js";
-import { Serial } from "./PageComponents/Connect/Serial.js";
+import { Serial } from "@components/PageComponents/Connect/Serial.js";
 
 export const NewDevice = () => {
-  const [tabs, _setTabs] = useState<TabType[]>([
+  const tabs: TabType[] = [
     {
       name: "BLE",
       icon: <FiBluetooth className="h-4" />,
@@ -34,7 +34,7 @@ export const NewDevice = () => {
       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">

src/components/PageComponents/AppConfig/Map.tsx

@@ -2,11 +2,11 @@ import type React from "react";
 
 import { Controller, useFieldArray, useForm } from "react-hook-form";
 
-import { Button } from "@app/components/Button.js";
+import { Button } from "@app/components/form/Button.js";
+import { IconButton } from "@app/components/form/IconButton.js";
 import { InfoWrapper } from "@app/components/form/InfoWrapper.js";
 import { Input } from "@app/components/form/Input.js";
 import { Toggle } from "@app/components/form/Toggle.js";
-import { IconButton } from "@app/components/IconButton.js";
 import { useAppStore } from "@app/core/stores/appStore.js";
 import { MapValidation } from "@app/validation/appConfig/map.js";
 import { Form } from "@components/form/Form";

src/components/PageComponents/Channel.tsx

@@ -5,9 +5,9 @@ import { fromByteArray, toByteArray } from "base64-js";
 import { Controller, useForm } from "react-hook-form";
 import { toast } from "react-hot-toast";
 
-import { Input } from "@app/components/form/Input.js";
 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";

src/components/PageComponents/Connect/BLE.tsx

@@ -1,8 +1,8 @@
 import type React from "react";
 import { useCallback, useEffect, useState } from "react";
 
-import { Mono } from "@app/components/Mono.js";
+import { Mono } from "@app/components/generic/Mono.js";
-import { Button } from "@components/Button.js";
+import { Button } from "@components/form/Button.js";
 import { useAppStore } from "@core/stores/appStore.js";
 import { useDeviceStore } from "@core/stores/deviceStore.js";
 import { subscribeAll } from "@core/subscriptions.js";

src/components/PageComponents/Connect/HTTP.tsx

@@ -4,7 +4,7 @@ import { Controller, useForm, useWatch } from "react-hook-form";
 
 import { Input } from "@app/components/form/Input.js";
 import { Toggle } from "@app/components/form/Toggle.js";
-import { Button } from "@components/Button.js";
+import { Button } from "@components/form/Button.js";
 import { useAppStore } from "@core/stores/appStore.js";
 import { useDeviceStore } from "@core/stores/deviceStore.js";
 import { subscribeAll } from "@core/subscriptions.js";

src/components/PageComponents/Connect/Serial.tsx

@@ -1,8 +1,8 @@
 import type React from "react";
 import { useCallback, useEffect, useState } from "react";
 
-import { Mono } from "@app/components/Mono.js";
+import { Mono } from "@app/components/generic/Mono.js";
-import { Button } from "@components/Button.js";
+import { Button } from "@components/form/Button.js";
 import { useAppStore } from "@core/stores/appStore.js";
 import { useDeviceStore } from "@core/stores/deviceStore.js";
 import { subscribeAll } from "@core/subscriptions.js";

src/components/PageComponents/Map/MapControlls.tsx

@@ -13,7 +13,7 @@ export const MapControlls = (): JSX.Element => {
     <div className="absolute right-0 top-0 z-10 m-2">
       <div className="divide-y overflow-hidden rounded-md bg-white">
         <div
-          className="cursor-pointer p-3 hover:bg-orange-300"
+          className="cursor-pointer p-3 hover:bg-orange-200 hover:text-orange-700"
           onClick={() => {
             map?.zoomIn();
           }}
@@ -21,7 +21,7 @@ export const MapControlls = (): JSX.Element => {
           <MagnifyingGlassPlusIcon className="h-4 w-4" />
         </div>
         <div
-          className="cursor-pointer p-3 hover:bg-orange-300"
+          className="cursor-pointer p-3 hover:bg-orange-200 hover:text-orange-700"
           onClick={() => {
             map?.zoomOut();
           }}
@@ -29,7 +29,7 @@ export const MapControlls = (): JSX.Element => {
           <MagnifyingGlassMinusIcon className="h-4 w-4" />
         </div>
         <div
-          className="cursor-pointer p-3 hover:bg-orange-300"
+          className="cursor-pointer p-3 hover:bg-orange-200 hover:text-orange-700"
           onClick={() => {}}
         >
           <FiCrosshair className="h-4 w-4" />

src/components/PageComponents/Messages/ChannelChat.tsx

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

src/components/PageComponents/Messages/MessageInput.tsx

@@ -2,8 +2,8 @@ import type React from "react";
 
 import { useForm } from "react-hook-form";
 
+import { IconButton } from "@app/components/form/IconButton.js";
 import { Input } from "@app/components/form/Input.js";
-import { IconButton } from "@app/components/IconButton.js";
 import { useDevice } from "@core/providers/useDevice.js";
 import type { Channel } from "@core/stores/deviceStore.js";
 import { MapPinIcon, PaperAirplaneIcon } from "@heroicons/react/24/outline";

src/components/PageComponents/Messages/NewLocationMessage.tsx

@@ -2,7 +2,7 @@ import type React from "react";
 
 import { Input } from "@app/components/form/Input.js";
 import { Select } from "@app/components/form/Select.js";
-import { Button } from "@components/Button.js";
+import { Button } from "@components/form/Button.js";
 import { useDevice } from "@core/providers/useDevice.js";
 import { renderOptions } from "@core/utils/selectEnumOptions.js";
 import { Protobuf } from "@meshtastic/meshtasticjs";

src/components/Sidebar.tsx

@@ -2,17 +2,14 @@ import type React from "react";
 
 import { useDevice } from "@app/core/providers/useDevice.js";
 import { toMGRS } from "@app/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 { Types } from "@meshtastic/meshtasticjs";
 
-import { BatteryWidget } from "./Widgets/BatteryWidget.js";
-import { ConfiguringWidget } from "./Widgets/ConfiguringWidget.js";
-import { DeviceWidget } from "./Widgets/DeviceWidget.js";
-import { NodeInfoWidget } from "./Widgets/NodeInfoWidget.js";
-import { PeersWidget } from "./Widgets/PeersWidget.js";
-import { PositionWidget } from "./Widgets/PositionWidget.js";
-
 export const Sidebar = (): JSX.Element => {
   const { removeDevice } = useDeviceStore();
   const { connection, hardware, nodes, status, currentMetrics } = useDevice();
@@ -39,7 +36,6 @@ export const Sidebar = (): JSX.Element => {
       />
 
       <div className="flex flex-col gap-3">
-        <NodeInfoWidget hardware={hardware} />
         <BatteryWidget
           batteryLevel={currentMetrics.batteryLevel}
           voltage={currentMetrics.voltage}
@@ -55,8 +51,6 @@ export const Sidebar = (): JSX.Element => {
             myNode?.data.position?.longitudeI
           )}
         />
-
-        <ConfiguringWidget />
       </div>
     </div>
   );

src/components/Widgets/ConfiguringWidget.tsx

@@ -1,119 +0,0 @@
-import React, { useEffect } from "react";
-
-import { useDevice } from "@core/providers/useDevice.js";
-import { AdjustmentsHorizontalIcon } from "@heroicons/react/24/outline";
-
-import { Card } from "../Card.js";
-import { Dropdown } from "../Dropdown.js";
-
-export const ConfiguringWidget = (): JSX.Element => {
-  const {
-    hardware,
-    channels,
-    config,
-    moduleConfig,
-    setReady,
-    nodes,
-    connection
-  } = useDevice();
-
-  useEffect(() => {
-    if (
-      hardware.myNodeNum !== 0 &&
-      Object.keys(config).length === 7 &&
-      Object.keys(moduleConfig).length === 7 &&
-      channels.length === hardware.maxChannels
-    ) {
-      setReady(true);
-    }
-  }, [
-    config,
-    moduleConfig,
-    channels,
-    hardware.maxChannels,
-    hardware.myNodeNum,
-    setReady
-  ]);
-
-  return (
-    <Card className="flex-col">
-      <Dropdown
-        title="Config Status"
-        icon={<AdjustmentsHorizontalIcon className="h-4" />}
-      >
-        <div className="flex flex-col gap-2 p-3">
-          <ol className="flex flex-col gap-3 overflow-hidden">
-            <StatusIndicator
-              title="Device Info"
-              current={hardware.myNodeNum ? 1 : 0}
-              total={0}
-            />
-            <StatusIndicator title="Peers" current={nodes.length} total={0} />
-            <StatusIndicator
-              title="Device Config"
-              current={Object.keys(config).length - 1}
-              total={6}
-            />
-            <StatusIndicator
-              title="Module Config"
-              current={Object.keys(moduleConfig).length - 1}
-              total={6}
-            />
-            <StatusIndicator
-              title="Channels"
-              current={channels.length}
-              total={hardware.maxChannels ?? 0}
-            />
-          </ol>
-        </div>
-      </Dropdown>
-    </Card>
-  );
-};
-
-export interface StatusIndicatorProps {
-  title: string;
-  current: number;
-  total: number;
-}
-
-const StatusIndicator = ({
-  title,
-  current,
-  total
-}: StatusIndicatorProps): JSX.Element => {
-  return (
-    <li className="relative">
-      <div
-        className={`absolute top-4 left-2.5 -ml-px h-full w-0.5 ${
-          current >= total ? "bg-green-500" : "bg-[#f9e3aa]"
-        }`}
-      />
-      <div className="flex">
-        <div
-          className={`relative z-10 flex h-5 w-5 rounded-full border-2  ${
-            current === 0
-              ? "border-[#dabb6b] bg-[#f9e3aa]"
-              : current >= total
-              ? "border-green-500 bg-green-500"
-              : "border-green-500 bg-[#f9e3aa]"
-          }`}
-        >
-          <span
-            className={`m-auto h-1.5 w-1.5 rounded-full ${
-              current > 0 ? "bg-green-500" : "bg-[#f9e3aa]"
-            }`}
-          />
-        </div>
-
-        <span className="ml-4 flex gap-1 text-sm">
-          <span className="font-medium">{title}</span>
-          <span className="font-mono text-slate-500">
-            ({current}
-            {total !== 0 && `/${total}`})
-          </span>
-        </span>
-      </div>
-    </li>
-  );
-};

src/components/Widgets/DeviceWidget.tsx

@@ -1,11 +1,9 @@
 import type React from "react";
 
+import { Button } from "@components/form/Button.js";
 import { Hashicon } from "@emeraldpay/hashicon-react";
 import { XCircleIcon } from "@heroicons/react/24/outline";
 
-import { Button } from "../Button.js";
-import { Card } from "../Card.js";
-
 export interface DeviceWidgetProps {
   name: string;
   nodeNum: string;
@@ -22,7 +20,7 @@ export const DeviceWidget = ({
   reconnect
 }: DeviceWidgetProps): JSX.Element => {
   return (
-    <Card className="relative shrink-0 flex-col">
+    <div className="relative flex shrink-0 flex-col overflow-hidden rounded-md bg-white text-sm text-black shadow-md">
       <div className="absolute bottom-20 h-full w-full">
         <Hashicon size={350} value={nodeNum} />
       </div>
@@ -46,6 +44,6 @@ export const DeviceWidget = ({
           </div>
         </div>
       </div>
-    </Card>
+    </div>
   );
 };

src/components/Widgets/NodeInfoWidget.tsx

@@ -1,42 +0,0 @@
-import type React from "react";
-
-import { InformationCircleIcon } from "@heroicons/react/24/outline";
-import type { Protobuf } from "@meshtastic/meshtasticjs";
-
-import { Card } from "../Card.js";
-import { Dropdown } from "../Dropdown.js";
-
-export interface NodeInfoWidgetProps {
-  hardware: Protobuf.MyNodeInfo;
-}
-
-export const NodeInfoWidget = ({
-  hardware
-}: NodeInfoWidgetProps): JSX.Element => {
-  return (
-    <Card className="flex-col">
-      <Dropdown
-        title="Information"
-        icon={<InformationCircleIcon className="h-4" />}
-      >
-        <div className="flex flex-col gap-2 p-3">
-          <dl className="mt-2 border-b border-gray-200">
-            <div className="flex justify-between py-1 text-sm font-medium">
-              <dt className="text-gray-500">Firmware version</dt>
-              <dd className="cursor-pointer whitespace-nowrap text-gray-900 hover:text-orange-400 hover:underline">
-                {hardware.firmwareVersion}
-              </dd>
-            </div>
-          </dl>
-          <div className="flex justify-between py-1 text-sm font-medium">
-            <dt className="text-gray-500">Bitrate</dt>
-            <dd className="whitespace-nowrap text-gray-900">
-              {hardware.bitrate.toFixed(2)}
-              <span className="font-mono text-sm text-slate-500 ">bps</span>
-            </dd>
-          </div>
-        </div>
-      </Dropdown>
-    </Card>
-  );
-};

src/components/Widgets/PeersWidget.tsx

@@ -1,15 +1,14 @@
 import type React from "react";
 
 import { useDevice } from "@app/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";
 
-import { IconButton } from "../IconButton.js";
-import { Mono } from "../Mono.js";
-
 export interface PeersWidgetProps {
   peers: Protobuf.NodeInfo[];
 }

src/components/form/BitwiseSelect.tsx

@@ -5,11 +5,10 @@ import {
   bitwiseEncode,
   enumLike
 } from "@app/core/utils/bitwise.js";
+import { InfoWrapper } from "@components/form/InfoWrapper.js";
 import { Listbox } from "@headlessui/react";
 import { Protobuf } from "@meshtastic/meshtasticjs";
 
-import { InfoWrapper } from "./InfoWrapper.js";
-
 export interface BitwiseSelectProps {
   label?: string;
   description?: string;

src/components/form/Form.tsx

@@ -3,7 +3,7 @@ import type { HTMLProps } from "react";
 
 import { FiSave } from "react-icons/fi";
 
-import { Button } from "@components/Button.js";
+import { Button } from "@components/form/Button.js";
 import {
   ArrowUturnLeftIcon,
   ChevronRightIcon,

src/components/form/Input.tsx

@@ -1,10 +1,9 @@
 import type React from "react";
 import { forwardRef, InputHTMLAttributes } from "react";
 
+import { InfoWrapper, InfoWrapperProps } from "@components/form/InfoWrapper.js";
 import { ExclamationCircleIcon } from "@heroicons/react/24/outline";
 
-import { InfoWrapper, InfoWrapperProps } from "./InfoWrapper.js";
-
 export interface InputProps
   extends InputHTMLAttributes<HTMLInputElement>,
     Omit<InfoWrapperProps, "children"> {

src/components/form/Select.tsx

@@ -1,7 +1,7 @@
 import type React from "react";
 import { forwardRef, SelectHTMLAttributes } from "react";
 
-import { InfoWrapper, InfoWrapperProps } from "./InfoWrapper.js";
+import { InfoWrapper, InfoWrapperProps } from "@components/form/InfoWrapper.js";
 
 export interface SelectProps
   extends SelectHTMLAttributes<HTMLSelectElement>,

src/components/layout/page/TabbedContent.tsx → src/components/generic/TabbedContent.tsx

@@ -1,7 +1,7 @@
 import type React from "react";
 import { Fragment } from "react";
 
-import { Mono } from "@app/components/Mono";
+import { Mono } from "@components/generic/Mono";
 import { Tab } from "@headlessui/react";
 
 export interface TabType {
@@ -29,10 +29,11 @@ export const TabbedContent = ({
           <Tab key={index}>
             {({ selected }) => (
               <div
-                className={`flex h-10 cursor-pointer gap-3 rounded-md px-3 text-sm font-medium ${selected
+                className={`flex h-10 cursor-pointer gap-3 rounded-md px-3 text-sm font-medium ${
-                  ? "bg-gray-100 text-gray-700"
+                  selected
-                  : "text-gray-500 hover:text-gray-700"
+                    ? "bg-gray-100 text-gray-700"
-                  }
+                    : "text-gray-500 hover:text-gray-700"
+                }
                    `}
               >
                 {entry.icon && (
@@ -57,12 +58,10 @@ export const TabbedContent = ({
             ) : (
               <div>
                 <Mono>
-                  {entry.disabledMessage || "This tab is disabled"}.
+                  {entry.disabledMessage || "This tab is disabled"}.{" "}
-                  {' '}
                   {entry.disabledLink && (
                     <>
-                      Click
+                      Click{" "}
-                      {' '}
                       <a
                         className="underline"
                         target="_blank"
@@ -70,8 +69,7 @@ export const TabbedContent = ({
                         href={entry.disabledLink}
                       >
                         here
-                      </a>
+                      </a>{" "}
-                      {' '}
                       for more information.
                     </>
                   )}

src/index.tsx

@@ -1,4 +1,4 @@
-import "./index.css";
+import "@app/index.css";
 import "maplibre-gl/dist/maplibre-gl.css";
 
 import type React from "react";

src/pages/Channels.tsx

@@ -1,8 +1,8 @@
 import type React from "react";
 
+import { TabbedContent, TabType } from "@app/components/generic/TabbedContent";
 import { Channel } from "@app/components/PageComponents/Channel.js";
-import { Button } from "@components/Button.js";
+import { Button } from "@components/form/Button.js";
-import { TabbedContent, TabType } from "@components/layout/page/TabbedContent";
 import { useDevice } from "@core/providers/useDevice.js";
 import {
   ArrowDownOnSquareStackIcon,

src/pages/Config/index.tsx

@@ -1,6 +1,6 @@
 import type React from "react";
 
-import { TabbedContent, TabType } from "@components/layout/page/TabbedContent";
+import { TabbedContent, TabType } from "@app/components/generic/TabbedContent";
 import {
   Cog8ToothIcon,
   CubeTransparentIcon,

src/pages/Extensions/Index.tsx

@@ -1,6 +1,6 @@
 import type React from "react";
 
-import { TabbedContent, TabType } from "@components/layout/page/TabbedContent";
+import { TabbedContent, TabType } from "@app/components/generic/TabbedContent";
 import { useDevice } from "@core/providers/useDevice.js";
 import {
   CloudIcon,

src/pages/Info.tsx

@@ -6,7 +6,7 @@ import { JSONTree } from "react-json-tree";
 import {
   TabbedContent,
   TabType
-} from "@app/components/layout/page/TabbedContent.js";
+} from "@app/components/generic/TabbedContent.js";
 import { useDevice } from "@core/providers/useDevice.js";
 import { EyeIcon } from "@heroicons/react/24/outline";
 
@@ -21,6 +21,11 @@ export const InfoPage = (): JSX.Element => {
   });
 
   const tabs: TabType[] = [
+    {
+      name: "Hardware",
+      icon: <EyeIcon className="h-4" />,
+      element: () => <JSONTree theme="monokai" data={hardware} />
+    },
     {
       name: "Config",
       icon: <EyeIcon className="h-4" />,
@@ -31,11 +36,7 @@ export const InfoPage = (): JSX.Element => {
       icon: <EyeIcon className="h-4" />,
       element: () => <JSONTree theme="monokai" data={moduleConfig} />
     },
-    {
+
-      name: "Hardware",
-      icon: <EyeIcon className="h-4" />,
-      element: () => <JSONTree theme="monokai" data={hardware} />
-    },
     {
       name: "Nodes",
       icon: <EyeIcon className="h-4" />,

src/pages/Logs.tsx

@@ -1,7 +1,7 @@
 import type React from "react";
 import { useEffect, useState } from "react";
 
-import { Mono } from "@app/components/Mono.js";
+import { Mono } from "@app/components/generic/Mono.js";
 import { useDevice } from "@core/providers/useDevice.js";
 import { Protobuf, Types } from "@meshtastic/meshtasticjs";
 

src/pages/Map.tsx

@@ -23,6 +23,11 @@ export const MapPage = (): JSX.Element => {
         maxPitch={0}
         dragRotate={false}
         touchZoomRotate={false}
+        initialViewState={{
+          zoom: 10,
+          latitude: -38,
+          longitude: 145
+        }}
       >
         <MapControlls />
         {waypoints.map((wp) => (

src/pages/Messages.tsx

@@ -1,10 +1,10 @@
 import type React from "react";
 
-import { IconButton } from "@app/components/IconButton.js";
+import { IconButton } from "@app/components/form/IconButton.js";
 import {
   TabbedContent,
   TabType
-} from "@components/layout/page/TabbedContent.js";
+} from "@app/components/generic/TabbedContent.js";
 import { ChannelChat } from "@components/PageComponents/Messages/ChannelChat.js";
 import { useDevice } from "@core/providers/useDevice.js";
 import { PencilIcon } from "@heroicons/react/24/outline";

src/pages/Peers.tsx

@@ -3,8 +3,8 @@ import type React from "react";
 import toast from "react-hot-toast";
 import { base16 } from "rfc4648";
 
-import { IconButton } from "@app/components/IconButton.js";
+import { IconButton } from "@app/components/form/IconButton.js";
-import { Mono } from "@app/components/Mono.js";
+import { Mono } from "@app/components/generic/Mono.js";
 import { useDevice } from "@core/providers/useDevice.js";
 import { Hashicon } from "@emeraldpay/hashicon-react";
 import {