2.2.0

src/components/Dashboard.tsx

@@ -1,101 +0,0 @@
-import { useAppStore } from "@app/core/stores/appStore.js";
-import { useDeviceStore } from "@app/core/stores/deviceStore.js";
-import { Button } from "@components/UI/Button.js";
-import { Separator } from "@components/UI/Seperator.js";
-import { H3 } from "@components/UI/Typography/H3.js";
-import { Subtle } from "@components/UI/Typography/Subtle.js";
-import {
-  BluetoothIcon,
-  CalendarIcon,
-  ListPlusIcon,
-  MapPinIcon,
-  NetworkIcon,
-  PlusIcon,
-  UsbIcon,
-  UsersIcon,
-} from "lucide-react";
-import { useMemo } from "react";
-
-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.get(device.hardware.myNodeNum)?.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.size === 0 ? 0 : device.nodes.size - 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,4 +1,4 @@
-import { DeviceSelectorButton } from "./DeviceSelectorButton.js";
+import { DeviceSelectorButton } from "@components/DeviceSelectorButton.js";
 import { Separator } from "@components/UI/Seperator.js";
 import { Code } from "@components/UI/Typography/Code.js";
 import { useAppStore } from "@core/stores/appStore.js";

src/components/Dialog/DialogManager.tsx

@@ -1,4 +1,4 @@
-import { DeviceNameDialog } from "./DeviceNameDialog.js";
+import { DeviceNameDialog } from "@components/Dialog/DeviceNameDialog.js";
 import { ImportDialog } from "@components/Dialog/ImportDialog.js";
 import { QRDialog } from "@components/Dialog/QRDialog.js";
 import { RebootDialog } from "@components/Dialog/RebootDialog.js";

src/components/Dialog/NewDeviceDialog.tsx

@@ -1,6 +1,6 @@
-import { BLE } from "../PageComponents/Connect/BLE.js";
-import { HTTP } from "../PageComponents/Connect/HTTP.js";
-import { Serial } from "../PageComponents/Connect/Serial.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 {
   Dialog,
   DialogContent,
@@ -68,8 +68,8 @@ export const NewDeviceDialog = ({
               </TabsTrigger>
             ))}
           </TabsList>
-          {tabs.map((tab, index) => (
-            <TabsContent key={index} value={tab.label}>
+          {tabs.map((tab) => (
+            <TabsContent key={tab.label} value={tab.label}>
               {tab.disabled ? (
                 <p className="text-sm text-slate-500 dark:text-slate-400">
                   {tab.disabledMessage}

src/components/Form/DynamicForm.tsx

@@ -1,6 +1,9 @@
-import { Button } from "../UI/Button.js";
-import { DynamicFormField, FieldProps } from "./DynamicFormField.js";
-import { FieldWrapper } from "./FormWrapper.js";
+import {
+  DynamicFormField,
+  FieldProps,
+} from "@components/Form/DynamicFormField.js";
+import { FieldWrapper } from "@components/Form/FormWrapper.js";
+import { Button } from "@components/UI/Button.js";
 import { H4 } from "@components/UI/Typography/H4.js";
 import { Subtle } from "@components/UI/Typography/Subtle.js";
 import {

src/components/Form/DynamicFormField.tsx

@@ -1,6 +1,6 @@
-import { GenericInput, InputFieldProps } from "./FormInput.js";
-import { SelectFieldProps, SelectInput } from "./FormSelect.js";
-import { ToggleFieldProps, ToggleInput } from "./FormToggle.js";
+import { GenericInput, InputFieldProps } from "@components/Form/FormInput.js";
+import { SelectFieldProps, SelectInput } from "@components/Form/FormSelect.js";
+import { ToggleFieldProps, ToggleInput } from "@components/Form/FormToggle.js";
 import type { Control, FieldValues } from "react-hook-form";
 
 export type FieldProps<T> =

src/components/Form/FormInput.tsx

@@ -1,8 +1,8 @@
-import { Input } from "../UI/Input.js";
 import type {
   BaseFormBuilderProps,
   GenericFormElementProps,
-} from "./DynamicForm.js";
+} from "@components/Form/DynamicForm.js";
+import { Input } from "@components/UI/Input.js";
 import type { LucideIcon } from "lucide-react";
 import { Controller, FieldValues } from "react-hook-form";
 

src/components/Form/FormSelect.tsx

@@ -1,14 +1,14 @@
+import type {
+  BaseFormBuilderProps,
+  GenericFormElementProps,
+} from "@components/Form/DynamicForm.js";
 import {
   Select,
   SelectContent,
   SelectItem,
   SelectTrigger,
   SelectValue,
-} from "../UI/Select.js";
-import type {
-  BaseFormBuilderProps,
-  GenericFormElementProps,
-} from "./DynamicForm.js";
+} from "@components/UI/Select.js";
 import { Controller, FieldValues } from "react-hook-form";
 
 export interface SelectFieldProps<T> extends BaseFormBuilderProps<T> {

src/components/Form/FormToggle.tsx

@@ -1,8 +1,8 @@
-import { Switch } from "../UI/Switch.js";
 import type {
   BaseFormBuilderProps,
   GenericFormElementProps,
-} from "./DynamicForm.js";
+} from "@components/Form/DynamicForm.js";
+import { Switch } from "@components/UI/Switch.js";
 import { ChangeEvent } from "react";
 import { Controller, FieldPathValue, FieldValues } from "react-hook-form";
 

src/components/Form/FormWrapper.tsx

@@ -1,4 +1,4 @@
-import { Label } from "../UI/Label.js";
+import { Label } from "@components/UI/Label.js";
 import { ErrorMessage } from "@hookform/error-message";
 
 export interface FieldWrapperProps {

src/components/UI/Sidebar/SidebarSection.tsx

@@ -1,4 +1,4 @@
-import { H4 } from "../Typography/H4.js";
+import { H4 } from "@components/UI/Typography/H4.js";
 
 export interface SidebarSectionProps {
   label: string;

src/components/UI/Sidebar/sidebarButton.tsx

@@ -1,4 +1,4 @@
-import { Button } from "../Button.js";
+import { Button } from "@components/UI/Button.js";
 import type { LucideIcon } from "lucide-react";
 
 export interface SidebarButtonProps {