Use rome and initial format

src/components/CommandPalette.tsx

@@ -1,40 +1,40 @@
-import { useEffect } from "react";
-import { useAppStore } from "@core/stores/appStore.js";
-import { useDevice, useDeviceStore } from "@core/stores/deviceStore.js";
-import { useCommandState } from "cmdk";
-import { Hashicon } from "@emeraldpay/hashicon-react";
-import {
-  LucideIcon,
-  LinkIcon,
-  TrashIcon,
-  MapIcon,
-  MoonIcon,
-  PlusIcon,
-  PowerIcon,
-  EraserIcon,
-  RefreshCwIcon,
-  FactoryIcon,
-  ArrowLeftRightIcon,
-  BugIcon,
-  SettingsIcon,
-  SmartphoneIcon,
-  MessageSquareIcon,
-  QrCodeIcon,
-  LayersIcon,
-  PaletteIcon,
-  UsersIcon,
-  LayoutIcon,
-  XCircleIcon,
-  BoxSelectIcon
-} from "lucide-react";
 import {
   CommandDialog,
   CommandEmpty,
   CommandGroup,
   CommandInput,
   CommandItem,
-  CommandList
+  CommandList,
 } from "@components/UI/Command.js";
+import { useAppStore } from "@core/stores/appStore.js";
+import { useDevice, useDeviceStore } from "@core/stores/deviceStore.js";
+import { Hashicon } from "@emeraldpay/hashicon-react";
+import { useCommandState } from "cmdk";
+import {
+  ArrowLeftRightIcon,
+  BoxSelectIcon,
+  BugIcon,
+  EraserIcon,
+  FactoryIcon,
+  LayersIcon,
+  LayoutIcon,
+  LinkIcon,
+  LucideIcon,
+  MapIcon,
+  MessageSquareIcon,
+  MoonIcon,
+  PaletteIcon,
+  PlusIcon,
+  PowerIcon,
+  QrCodeIcon,
+  RefreshCwIcon,
+  SettingsIcon,
+  SmartphoneIcon,
+  TrashIcon,
+  UsersIcon,
+  XCircleIcon,
+} from "lucide-react";
+import { useEffect } from "react";
 
 export interface Group {
   label: string;
@@ -64,7 +64,7 @@ export const CommandPalette = (): JSX.Element => {
     selectedDevice,
     darkMode,
     setDarkMode,
-    setAccent
+    setAccent,
   } = useAppStore();
   const { getDevices } = useDeviceStore();
   const { setDialogOpen, setActivePage, connection } = useDevice();
@@ -79,14 +79,14 @@ export const CommandPalette = (): JSX.Element => {
           icon: MessageSquareIcon,
           action() {
             setActivePage("messages");
-          }
+          },
         },
         {
           label: "Map",
           icon: MapIcon,
           action() {
             setActivePage("map");
-          }
+          },
         },
         {
           label: "Config",
@@ -94,23 +94,23 @@ export const CommandPalette = (): JSX.Element => {
           action() {
             setActivePage("config");
           },
-          tags: ["settings"]
+          tags: ["settings"],
         },
         {
           label: "Channels",
           icon: LayersIcon,
           action() {
             setActivePage("channels");
-          }
+          },
         },
         {
           label: "Peers",
           icon: UsersIcon,
           action() {
             setActivePage("peers");
-          }
-        }
-      ]
+          },
+        },
+      ],
     },
     {
       label: "Manage",
@@ -132,18 +132,18 @@ export const CommandPalette = (): JSX.Element => {
               ),
               action() {
                 setSelectedDevice(device.id);
-              }
+              },
             };
-          })
+          }),
         },
         {
           label: "Connect New Node",
           icon: PlusIcon,
           action() {
             setSelectedDevice(0);
-          }
-        }
-      ]
+          },
+        },
+      ],
     },
     {
       label: "Contextual",
@@ -158,16 +158,16 @@ export const CommandPalette = (): JSX.Element => {
               icon: <QrCodeIcon size={16} />,
               action() {
                 setDialogOpen("QR", true);
-              }
+              },
             },
             {
               label: "Import",
               icon: <QrCodeIcon size={16} />,
               action() {
                 setDialogOpen("import", true);
-              }
-            }
-          ]
+              },
+            },
+          ],
         },
         {
           label: "Disconnect",
@@ -176,37 +176,37 @@ export const CommandPalette = (): JSX.Element => {
             void connection?.disconnect();
             setSelectedDevice(0);
             removeDevice(selectedDevice ?? 0);
-          }
+          },
         },
         {
           label: "Schedule Shutdown",
           icon: PowerIcon,
           action() {
             setDialogOpen("shutdown", true);
-          }
+          },
         },
         {
           label: "Schedule Reboot",
           icon: RefreshCwIcon,
           action() {
             setDialogOpen("reboot", true);
-          }
+          },
         },
         {
           label: "Reset Peers",
           icon: TrashIcon,
           action() {
             connection?.resetPeers();
-          }
+          },
         },
         {
           label: "Factory Reset",
           icon: FactoryIcon,
           action() {
             connection?.factoryReset();
-          }
-        }
-      ]
+          },
+        },
+      ],
     },
     {
       label: "Debug",
@@ -217,16 +217,16 @@ export const CommandPalette = (): JSX.Element => {
           icon: RefreshCwIcon,
           action() {
             void connection?.configure();
-          }
+          },
         },
         {
           label: "[WIP] Clear Messages",
           icon: EraserIcon,
           action() {
             alert("This feature is not implemented");
-          }
-        }
-      ]
+          },
+        },
+      ],
     },
     {
       label: "Application",
@@ -237,7 +237,7 @@ export const CommandPalette = (): JSX.Element => {
           icon: MoonIcon,
           action() {
             setDarkMode(!darkMode);
-          }
+          },
         },
         {
           label: "Accent Color",
@@ -254,7 +254,7 @@ export const CommandPalette = (): JSX.Element => {
               ),
               action() {
                 setAccent("red");
-              }
+              },
             },
             {
               label: "Orange",
@@ -267,7 +267,7 @@ export const CommandPalette = (): JSX.Element => {
               ),
               action() {
                 setAccent("orange");
-              }
+              },
             },
             {
               label: "Yellow",
@@ -280,7 +280,7 @@ export const CommandPalette = (): JSX.Element => {
               ),
               action() {
                 setAccent("yellow");
-              }
+              },
             },
             {
               label: "Green",
@@ -293,7 +293,7 @@ export const CommandPalette = (): JSX.Element => {
               ),
               action() {
                 setAccent("green");
-              }
+              },
             },
             {
               label: "Blue",
@@ -306,7 +306,7 @@ export const CommandPalette = (): JSX.Element => {
               ),
               action() {
                 setAccent("blue");
-              }
+              },
             },
             {
               label: "Purple",
@@ -319,7 +319,7 @@ export const CommandPalette = (): JSX.Element => {
               ),
               action() {
                 setAccent("purple");
-              }
+              },
             },
             {
               label: "Pink",
@@ -332,12 +332,12 @@ export const CommandPalette = (): JSX.Element => {
               ),
               action() {
                 setAccent("pink");
-              }
-            }
-          ]
-        }
-      ]
-    }
+              },
+            },
+          ],
+        },
+      ],
+    },
   ];
 
   useEffect(() => {
@@ -394,7 +394,7 @@ export const CommandPalette = (): JSX.Element => {
 const SubItem = ({
   label,
   icon,
-  action
+  action,
 }: {
   label: string;
   icon: React.ReactNode;

src/components/Dashboard.tsx

@@ -8,7 +8,7 @@ import {
   CalendarIcon,
   BluetoothIcon,
   UsbIcon,
-  NetworkIcon
+  NetworkIcon,
 } from "lucide-react";
 import { Subtle } from "@components/UI/Typography/Subtle.js";
 import { H3 } from "@components/UI/Typography/H3.js";

src/components/DeviceSelector.tsx

@@ -8,7 +8,7 @@ import {
   SunIcon,
   MoonIcon,
   GithubIcon,
-  TerminalIcon
+  TerminalIcon,
 } from "lucide-react";
 import { Separator } from "@components/UI/Seperator.js";
 import { Code } from "@components/UI/Typography/Code.js";
@@ -22,7 +22,7 @@ export const DeviceSelector = (): JSX.Element => {
     darkMode,
     setDarkMode,
     setCommandPaletteOpen,
-    setConnectDialogOpen
+    setConnectDialogOpen,
   } = useAppStore();
 
   return (

src/components/DeviceSelectorButton.tsx

@@ -9,7 +9,7 @@ export interface DeviceSelectorButtonProps {
 export const DeviceSelectorButton = ({
   active,
   onClick,
-  children
+  children,
 }: DeviceSelectorButtonProps): JSX.Element => (
   <li className="aspect-w-1 aspect-h-1 relative w-full" onClick={onClick}>
     {active && (

src/components/Dialog/DeviceNameDialog.tsx

@@ -5,7 +5,7 @@ import {
   DialogDescription,
   DialogFooter,
   DialogHeader,
-  DialogTitle
+  DialogTitle,
 } from "@components/UI/Dialog.js";
 import { Button } from "@components/UI/Button.js";
 import { useDevice } from "@app/core/stores/deviceStore.js";
@@ -25,7 +25,7 @@ export interface DeviceNameDialogProps {
 
 export const DeviceNameDialog = ({
   open,
-  onOpenChange
+  onOpenChange,
 }: DeviceNameDialogProps): JSX.Element => {
   const { hardware, nodes, connection } = useDevice();
 
@@ -34,16 +34,16 @@ export const DeviceNameDialog = ({
   const { register, handleSubmit } = useForm<User>({
     values: {
       longName: myNode?.user?.longName ?? "Unknown",
-      shortName: myNode?.user?.shortName ?? "Unknown"
-    }
+      shortName: myNode?.user?.shortName ?? "Unknown",
+    },
   });
 
   const onSubmit = handleSubmit((data) => {
     connection?.setOwner(
       new Protobuf.User({
         ...myNode?.user,
-        ...data
-      })
+        ...data,
+      }),
     );
     onOpenChange(false);
   });

src/components/Dialog/ImportDialog.tsx

@@ -8,7 +8,7 @@ import {
   DialogDescription,
   DialogFooter,
   DialogHeader,
-  DialogTitle
+  DialogTitle,
 } from "@components/UI/Dialog.js";
 import { Protobuf } from "@meshtastic/meshtasticjs";
 import { Switch } from "@components/UI/Switch.js";
@@ -24,7 +24,7 @@ export interface ImportDialogProps {
 
 export const ImportDialog = ({
   open,
-  onOpenChange
+  onOpenChange,
 }: ImportDialogProps): JSX.Element => {
   const [QRCodeURL, setQRCodeURL] = useState<string>("");
   const [channelSet, setChannelSet] = useState<Protobuf.ChannelSet>();
@@ -55,8 +55,8 @@ export const ImportDialog = ({
             index === 0
               ? Protobuf.Channel_Role.PRIMARY
               : Protobuf.Channel_Role.SECONDARY,
-          settings: ch
-        })
+          settings: ch,
+        }),
       );
     });
 
@@ -65,9 +65,9 @@ export const ImportDialog = ({
         new Protobuf.Config({
           payloadVariant: {
             case: "lora",
-            value: channelSet.loraConfig
-          }
-        })
+            value: channelSet.loraConfig,
+          },
+        }),
       );
     }
   };

src/components/Dialog/NewDeviceDialog.tsx

@@ -3,13 +3,13 @@ import {
   DialogContent,
   DialogDescription,
   DialogHeader,
-  DialogTitle
+  DialogTitle,
 } from "@components/UI/Dialog.js";
 import {
   Tabs,
   TabsContent,
   TabsList,
-  TabsTrigger
+  TabsTrigger,
 } from "@components/UI/Tabs.js";
 import { Subtle } from "@components/UI/Typography/Subtle.js";
 import { Link } from "@components/UI/Typography/Link.js";
@@ -22,7 +22,7 @@ const tabs = [
     label: "HTTP",
     element: HTTP,
     disabled: false,
-    disabledMessage: "Unsuported connection method"
+    disabledMessage: "Unsuported connection method",
   },
   {
     label: "Bluetooth",
@@ -31,15 +31,15 @@ const tabs = [
     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"
+      "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"
-  }
+      "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;
@@ -48,7 +48,7 @@ export interface NewDeviceProps {
 
 export const NewDeviceDialog = ({
   open,
-  onOpenChange
+  onOpenChange,
 }: NewDeviceProps): JSX.Element => {
   return (
     <Dialog open={open} onOpenChange={onOpenChange}>

src/components/Dialog/QRDialog.tsx

@@ -9,7 +9,7 @@ import {
   DialogDescription,
   DialogFooter,
   DialogHeader,
-  DialogTitle
+  DialogTitle,
 } from "@components/UI/Dialog.js";
 import { ClipboardIcon } from "lucide-react";
 import { Protobuf, Types } from "@meshtastic/meshtasticjs";
@@ -26,7 +26,7 @@ export const QRDialog = ({
   open,
   onOpenChange,
   loraConfig,
-  channels
+  channels,
 }: QRDialogProps): JSX.Element => {
   const [selectedChannels, setSelectedChannels] = useState<number[]>([0]);
   const [QRCodeURL, setQRCodeURL] = useState<string>("");
@@ -41,8 +41,8 @@ export const QRDialog = ({
     const encoded = new Protobuf.ChannelSet(
       new Protobuf.ChannelSet({
         loraConfig,
-        settings: channelsToEncode
-      })
+        settings: channelsToEncode,
+      }),
     );
     const base64 = fromByteArray(encoded.toBinary())
       .replace(/=/g, "")
@@ -79,12 +79,12 @@ export const QRDialog = ({
                     onCheckedChange={() => {
                       if (selectedChannels.includes(channel.index)) {
                         setSelectedChannels(
-                          selectedChannels.filter((c) => c !== channel.index)
+                          selectedChannels.filter((c) => c !== channel.index),
                         );
                       } else {
                         setSelectedChannels([
                           ...selectedChannels,
-                          channel.index
+                          channel.index,
                         ]);
                       }
                     }}
@@ -104,7 +104,7 @@ export const QRDialog = ({
               icon: ClipboardIcon,
               onClick() {
                 void navigator.clipboard.writeText(QRCodeURL);
-              }
+              },
             }}
           />
         </DialogFooter>

src/components/Dialog/RebootDialog.tsx

@@ -6,7 +6,7 @@ import {
   DialogDescription,
   DialogFooter,
   DialogHeader,
-  DialogTitle
+  DialogTitle,
 } from "@components/UI/Dialog.js";
 import { ClockIcon, RefreshCwIcon } from "lucide-react";
 import { Button } from "@components/UI/Button.js";
@@ -19,7 +19,7 @@ export interface RebootDialogProps {
 
 export const RebootDialog = ({
   open,
-  onOpenChange
+  onOpenChange,
 }: RebootDialogProps): JSX.Element => {
   const { connection } = useDevice();
 
@@ -43,7 +43,7 @@ export const RebootDialog = ({
               icon: ClockIcon,
               onClick() {
                 connection?.reboot(time * 60).then(() => onOpenChange(false));
-              }
+              },
             }}
           />
           <Button

src/components/Dialog/ShutdownDialog.tsx

@@ -5,7 +5,7 @@ import {
   DialogContent,
   DialogDescription,
   DialogHeader,
-  DialogTitle
+  DialogTitle,
 } from "@components/UI/Dialog.js";
 import { ClockIcon, PowerIcon } from "lucide-react";
 import { Button } from "@components/UI/Button.js";
@@ -18,7 +18,7 @@ export interface ShutdownDialogProps {
 
 export const ShutdownDialog = ({
   open,
-  onOpenChange
+  onOpenChange,
 }: ShutdownDialogProps): JSX.Element => {
   const { connection } = useDevice();
 

src/components/Form/DynamicForm.tsx

@@ -4,7 +4,7 @@ import {
   FieldValues,
   Path,
   SubmitHandler,
-  useForm
+  useForm,
 } from "react-hook-form";
 import { H4 } from "@components/UI/Typography/H4.js";
 import { Subtle } from "@components/UI/Typography/Subtle.js";
@@ -49,11 +49,11 @@ export function DynamicForm<T extends FieldValues>({
   submitType = "onChange",
   hasSubmitButton,
   defaultValues,
-  fieldGroups
+  fieldGroups,
 }: DynamicFormProps<T>) {
   const { handleSubmit, control, getValues } = useForm<T>({
     mode: submitType,
-    defaultValues: defaultValues
+    defaultValues: defaultValues,
   });
 
   const isDisabled = (disabledBy?: DisabledBy<T>[]): boolean => {
@@ -76,7 +76,7 @@ export function DynamicForm<T extends FieldValues>({
       {...(submitType === "onSubmit"
         ? { onSubmit: handleSubmit(onSubmit) }
         : {
-            onChange: handleSubmit(onSubmit)
+            onChange: handleSubmit(onSubmit),
           })}
     >
       {fieldGroups.map((fieldGroup, index) => (

src/components/Form/DynamicFormField.tsx

@@ -17,7 +17,7 @@ export interface DynamicFormFieldProps<T extends FieldValues> {
 export function DynamicFormField<T extends FieldValues>({
   field,
   control,
-  disabled
+  disabled,
 }: DynamicFormFieldProps<T>) {
   switch (field.type) {
     case "text":

src/components/Form/FormInput.tsx

@@ -1,7 +1,7 @@
 import type { LucideIcon } from "lucide-react";
 import type {
   BaseFormBuilderProps,
-  GenericFormElementProps
+  GenericFormElementProps,
 } from "./DynamicForm.js";
 import { Input } from "../UI/Input.js";
 import { Controller, FieldValues } from "react-hook-form";
@@ -21,7 +21,7 @@ export interface InputFieldProps<T> extends BaseFormBuilderProps<T> {
 export function GenericInput<T extends FieldValues>({
   control,
   disabled,
-  field
+  field,
 }: GenericFormElementProps<T, InputFieldProps<T>>) {
   return (
     <Controller
@@ -35,7 +35,7 @@ export function GenericInput<T extends FieldValues>({
             onChange(
               field.type === "number"
                 ? parseInt(e.target.value)
-                : e.target.value
+                : e.target.value,
             )
           }
           disabled={disabled}

src/components/Form/FormSelect.tsx

@@ -1,6 +1,6 @@
 import type {
   BaseFormBuilderProps,
-  GenericFormElementProps
+  GenericFormElementProps,
 } from "./DynamicForm.js";
 import { Controller, FieldValues } from "react-hook-form";
 import {
@@ -8,7 +8,7 @@ import {
   SelectContent,
   SelectItem,
   SelectTrigger,
-  SelectValue
+  SelectValue,
 } from "../UI/Select.js";
 
 export interface SelectFieldProps<T> extends BaseFormBuilderProps<T> {
@@ -24,7 +24,7 @@ export interface SelectFieldProps<T> extends BaseFormBuilderProps<T> {
 export function SelectInput<T extends FieldValues>({
   control,
   disabled,
-  field
+  field,
 }: GenericFormElementProps<T, SelectFieldProps<T>>) {
   return (
     <Controller
@@ -35,7 +35,7 @@ export function SelectInput<T extends FieldValues>({
           field.properties;
         const optionsEnumValues = enumValue
           ? Object.entries(enumValue).filter(
-              (value) => typeof value[1] === "number"
+              (value) => typeof value[1] === "number",
             )
           : [];
         return (

src/components/Form/FormToggle.tsx

@@ -1,9 +1,10 @@
+import { Switch } from "../UI/Switch.js";
 import type {
   BaseFormBuilderProps,
-  GenericFormElementProps
+  GenericFormElementProps,
 } from "./DynamicForm.js";
-import { Controller, FieldValues } from "react-hook-form";
-import { Switch } from "../UI/Switch.js";
+import { ChangeEvent } from "react";
+import { Controller, FieldPathValue, FieldValues } from "react-hook-form";
 
 export interface ToggleFieldProps<T> extends BaseFormBuilderProps<T> {
   type: "toggle";
@@ -12,8 +13,18 @@ export interface ToggleFieldProps<T> extends BaseFormBuilderProps<T> {
 export function ToggleInput<T extends FieldValues>({
   control,
   disabled,
-  field
+  field,
 }: GenericFormElementProps<T, ToggleFieldProps<T>>) {
+  const onChangeHandler = (e: (event: ChangeEvent) => void) => {
+    return (value: boolean) => {
+      e({
+        target: {
+          value: value,
+        },
+      } as unknown as ChangeEvent);
+    };
+  };
+
   return (
     <Controller
       name={field.name}
@@ -21,7 +32,7 @@ export function ToggleInput<T extends FieldValues>({
       render={({ field: { value, onChange, ...rest } }) => (
         <Switch
           checked={value}
-          onCheckedChange={onChange}
+          onCheckedChange={onChangeHandler(onChange)}
           disabled={disabled}
           {...field.properties}
           {...rest}

src/components/Form/FormWrapper.tsx

@@ -11,7 +11,7 @@ export interface FieldWrapperProps {
 export const FieldWrapper = ({
   label,
   description,
-  children
+  children,
 }: FieldWrapperProps): JSX.Element => (
   <div className="pt-6 sm:pt-5">
     <div role="group" aria-labelledby="label-notifications">

src/components/PageComponents/Channel.tsx

@@ -18,12 +18,12 @@ export const Channel = ({ channel }: SettingsPanelProps): JSX.Element => {
       ...data,
       settings: {
         ...data.settings,
-        psk: toByteArray(data.settings.psk ?? "")
-      }
+        psk: toByteArray(data.settings.psk ?? ""),
+      },
     });
     connection?.setChannel(channel).then(() => {
       toast({
-        title: `Saved Channel: ${channel.settings?.name}`
+        title: `Saved Channel: ${channel.settings?.name}`,
       });
       addChannel(channel);
     });
@@ -39,9 +39,9 @@ export const Channel = ({ channel }: SettingsPanelProps): JSX.Element => {
         ...{
           settings: {
             ...channel?.settings,
-            psk: fromByteArray(channel?.settings?.psk ?? new Uint8Array(0))
-          }
-        }
+            psk: fromByteArray(channel?.settings?.psk ?? new Uint8Array(0)),
+          },
+        },
       }}
       fieldGroups={[
         {
@@ -54,8 +54,8 @@ export const Channel = ({ channel }: SettingsPanelProps): JSX.Element => {
               label: "Role",
               description: "Description",
               properties: {
-                enumValue: Protobuf.Channel_Role
-              }
+                enumValue: Protobuf.Channel_Role,
+              },
             },
             {
               type: "password",
@@ -64,40 +64,40 @@ export const Channel = ({ channel }: SettingsPanelProps): JSX.Element => {
               description: "Description",
               properties: {
                 // act
-              }
+              },
             },
             {
               type: "number",
               name: "settings.channelNum",
               label: "Channel Number",
-              description: "Description"
+              description: "Description",
             },
             {
               type: "text",
               name: "settings.name",
               label: "Name",
-              description: "Description"
+              description: "Description",
             },
             {
               type: "number",
               name: "settings.id",
               label: "ID",
-              description: "Description"
+              description: "Description",
             },
             {
               type: "toggle",
               name: "settings.uplinkEnabled",
               label: "Uplink Enabled",
-              description: "Description"
+              description: "Description",
             },
             {
               type: "toggle",
               name: "settings.downlinkEnabled",
               label: "Downlink Enabled",
-              description: "Description"
-            }
-          ]
-        }
+              description: "Description",
+            },
+          ],
+        },
       ]}
     />
   );

src/components/PageComponents/Config/Bluetooth.tsx

@@ -11,9 +11,9 @@ export const Bluetooth = (): JSX.Element => {
       new Protobuf.Config({
         payloadVariant: {
           case: "bluetooth",
-          value: data
-        }
-      })
+          value: data,
+        },
+      }),
     );
   };
 
@@ -30,7 +30,7 @@ export const Bluetooth = (): JSX.Element => {
               type: "toggle",
               name: "enabled",
               label: "Enabled",
-              description: "Enable or disable Bluetooth"
+              description: "Enable or disable Bluetooth",
             },
             {
               type: "select",
@@ -39,13 +39,13 @@ export const Bluetooth = (): JSX.Element => {
               description: "Pin selection behaviour.",
               disabledBy: [
                 {
-                  fieldName: "enabled"
-                }
+                  fieldName: "enabled",
+                },
               ],
               properties: {
                 enumValue: Protobuf.Config_BluetoothConfig_PairingMode,
-                formatEnumName: true
-              }
+                formatEnumName: true,
+              },
             },
             {
               type: "number",
@@ -57,16 +57,16 @@ export const Bluetooth = (): JSX.Element => {
                   fieldName: "mode",
                   selector:
                     Protobuf.Config_BluetoothConfig_PairingMode.FIXED_PIN,
-                  invert: true
+                  invert: true,
                 },
                 {
-                  fieldName: "enabled"
-                }
+                  fieldName: "enabled",
+                },
               ],
-              properties: {}
-            }
-          ]
-        }
+              properties: {},
+            },
+          ],
+        },
       ]}
     />
   );

src/components/PageComponents/Config/Device.tsx

@@ -1,7 +1,7 @@
 import type { DeviceValidation } from "@app/validation/config/device.js";
+import { DynamicForm } from "@components/Form/DynamicForm.js";
 import { useDevice } from "@core/stores/deviceStore.js";
 import { Protobuf } from "@meshtastic/meshtasticjs";
-import { DynamicForm } from "@components/Form/DynamicForm.js";
 
 export const Device = (): JSX.Element => {
   const { config, setWorkingConfig } = useDevice();
@@ -11,9 +11,9 @@ export const Device = (): JSX.Element => {
       new Protobuf.Config({
         payloadVariant: {
           case: "device",
-          value: data
-        }
-      })
+          value: data,
+        },
+      }),
     );
   };
 
@@ -33,33 +33,33 @@ export const Device = (): JSX.Element => {
               description: "What role the device performs on the mesh",
               properties: {
                 enumValue: Protobuf.Config_DeviceConfig_Role,
-                formatEnumName: true
-              }
+                formatEnumName: true,
+              },
             },
             {
               type: "toggle",
               name: "serialEnabled",
               label: "Serial Output Enabled",
-              description: "Enable the device's serial console"
+              description: "Enable 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)"
+                "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"
+              description: "Button pin override",
             },
             {
               type: "number",
               name: "buzzerGpio",
               label: "Buzzer Pin",
-              description: "Buzzer pin override"
+              description: "Buzzer pin override",
             },
             {
               type: "select",
@@ -68,8 +68,8 @@ export const Device = (): JSX.Element => {
               description: "How to handle rebroadcasting",
               properties: {
                 enumValue: Protobuf.Config_DeviceConfig_RebroadcastMode,
-                formatEnumName: true
-              }
+                formatEnumName: true,
+              },
             },
             {
               type: "number",
@@ -77,11 +77,23 @@ export const Device = (): JSX.Element => {
               label: "Node Info Broadcast Interval",
               description: "How often to broadcast node info",
               properties: {
-                suffix: "Seconds"
-              }
-            }
-          ]
-        }
+                suffix: "Seconds",
+              },
+            },
+            {
+              type: "toggle",
+              name: "doubleTapAsButtonPress",
+              label: "Double Tap as Button Press",
+              description: "Treat double tap as button press",
+            },
+            {
+              type: "toggle",
+              name: "isManaged",
+              label: "Managed",
+              description: "Is this device managed by a mesh administator",
+            },
+          ],
+        },
       ]}
     />
   );

src/components/PageComponents/Config/Display.tsx

@@ -1,7 +1,7 @@
 import type { DisplayValidation } from "@app/validation/config/display.js";
+import { DynamicForm } from "@components/Form/DynamicForm.js";
 import { useDevice } from "@core/stores/deviceStore.js";
 import { Protobuf } from "@meshtastic/meshtasticjs";
-import { DynamicForm } from "@components/Form/DynamicForm.js";
 
 export const Display = (): JSX.Element => {
   const { config, setWorkingConfig } = useDevice();
@@ -11,9 +11,9 @@ export const Display = (): JSX.Element => {
       new Protobuf.Config({
         payloadVariant: {
           case: "display",
-          value: data
-        }
-      })
+          value: data,
+        },
+      }),
     );
   };
 
@@ -32,8 +32,8 @@ export const Display = (): JSX.Element => {
               label: "Screen Timeout",
               description: "Turn off the display after this long",
               properties: {
-                suffix: "seconds"
-              }
+                suffix: "seconds",
+              },
             },
             {
               type: "select",
@@ -41,26 +41,26 @@ export const Display = (): JSX.Element => {
               label: "GPS Display Units",
               description: "Coordinate display format",
               properties: {
-                enumValue: Protobuf.Config_DisplayConfig_GpsCoordinateFormat
-              }
+                enumValue: Protobuf.Config_DisplayConfig_GpsCoordinateFormat,
+              },
             },
             {
               type: "number",
               name: "autoScreenCarouselSecs",
               label: "Carousel Delay",
-              description: "How fast to cycle through windows"
+              description: "How fast to cycle through windows",
             },
             {
               type: "toggle",
               name: "compassNorthTop",
               label: "Compass North Top",
-              description: "Fix north to the top of compass"
+              description: "Fix north to the top of compass",
             },
             {
               type: "toggle",
               name: "flipScreen",
               label: "Flip Screen",
-              description: "Flip display 180 degrees"
+              description: "Flip display 180 degrees",
             },
             {
               type: "select",
@@ -69,8 +69,8 @@ export const Display = (): JSX.Element => {
               description: "Display metric or imperial units",
               properties: {
                 enumValue: Protobuf.Config_DisplayConfig_DisplayUnits,
-                formatEnumName: true
-              }
+                formatEnumName: true,
+              },
             },
             {
               type: "select",
@@ -78,8 +78,8 @@ export const Display = (): JSX.Element => {
               label: "OLED Type",
               description: "Type of OLED screen attached to the device",
               properties: {
-                enumValue: Protobuf.Config_DisplayConfig_OledType
-              }
+                enumValue: Protobuf.Config_DisplayConfig_OledType,
+              },
             },
             {
               type: "select",
@@ -88,17 +88,23 @@ export const Display = (): JSX.Element => {
               description: "Screen layout variant",
               properties: {
                 enumValue: Protobuf.Config_DisplayConfig_DisplayMode,
-                formatEnumName: true
-              }
+                formatEnumName: true,
+              },
             },
             {
               type: "toggle",
               name: "headingBold",
               label: "Bold Heading",
-              description: "Bolden the heading text"
-            }
-          ]
-        }
+              description: "Bolden the heading text",
+            },
+            {
+              type: "toggle",
+              name: "wakeOnTapOrMotion",
+              label: "Wake on Tap or Motion",
+              description: "Wake the device on tap or motion",
+            },
+          ],
+        },
       ]}
     />
   );

src/components/PageComponents/Config/LoRa.tsx

@@ -11,9 +11,9 @@ export const LoRa = (): JSX.Element => {
       new Protobuf.Config({
         payloadVariant: {
           case: "lora",
-          value: data
-        }
-      })
+          value: data,
+        },
+      }),
     );
   };
 
@@ -32,22 +32,22 @@ export const LoRa = (): JSX.Element => {
               label: "Region",
               description: "Sets the region for your node",
               properties: {
-                enumValue: Protobuf.Config_LoRaConfig_RegionCode
-              }
+                enumValue: Protobuf.Config_LoRaConfig_RegionCode,
+              },
             },
             {
               type: "number",
               name: "hopLimit",
               label: "Hop Limit",
-              description: "Maximum number of hops"
+              description: "Maximum number of hops",
             },
             {
               type: "number",
               name: "channelNum",
               label: "Channel Number",
-              description: "LoRa channel number"
-            }
-          ]
+              description: "LoRa channel number",
+            },
+          ],
         },
         {
           label: "Waveform Settings",
@@ -57,7 +57,7 @@ export const LoRa = (): JSX.Element => {
               type: "toggle",
               name: "usePreset",
               label: "Use Preset",
-              description: "Use one of the predefined modem presets"
+              description: "Use one of the predefined modem presets",
             },
             {
               type: "select",
@@ -66,13 +66,13 @@ export const LoRa = (): JSX.Element => {
               description: "Modem preset to use",
               disabledBy: [
                 {
-                  fieldName: "usePreset"
-                }
+                  fieldName: "usePreset",
+                },
               ],
               properties: {
                 enumValue: Protobuf.Config_LoRaConfig_ModemPreset,
-                formatEnumName: true
-              }
+                formatEnumName: true,
+              },
             },
             {
               type: "number",
@@ -82,12 +82,12 @@ export const LoRa = (): JSX.Element => {
               disabledBy: [
                 {
                   fieldName: "usePreset",
-                  invert: true
-                }
+                  invert: true,
+                },
               ],
               properties: {
-                suffix: "MHz"
-              }
+                suffix: "MHz",
+              },
             },
             {
               type: "number",
@@ -98,12 +98,12 @@ export const LoRa = (): JSX.Element => {
               disabledBy: [
                 {
                   fieldName: "usePreset",
-                  invert: true
-                }
+                  invert: true,
+                },
               ],
               properties: {
-                suffix: "CPS"
-              }
+                suffix: "CPS",
+              },
             },
             {
               type: "number",
@@ -113,11 +113,11 @@ export const LoRa = (): JSX.Element => {
               disabledBy: [
                 {
                   fieldName: "usePreset",
-                  invert: true
-                }
-              ]
-            }
-          ]
+                  invert: true,
+                },
+              ],
+            },
+          ],
         },
         {
           label: "Radio Settings",
@@ -127,7 +127,7 @@ export const LoRa = (): JSX.Element => {
               type: "toggle",
               name: "txEnabled",
               label: "Tramsmit Enabled",
-              description: "Enable/Disable transmit (TX) from the LoRa radio"
+              description: "Enable/Disable transmit (TX) from the LoRa radio",
             },
             {
               type: "number",
@@ -135,14 +135,14 @@ export const LoRa = (): JSX.Element => {
               label: "Transmit Power",
               description: "Max transmit power",
               properties: {
-                suffix: "dBm"
-              }
+                suffix: "dBm",
+              },
             },
             {
               type: "toggle",
               name: "overrideDutyCycle",
               label: "Override Duty Cycle",
-              description: "Override Duty Cycle"
+              description: "Override Duty Cycle",
             },
             {
               type: "number",
@@ -151,14 +151,14 @@ export const LoRa = (): JSX.Element => {
               description:
                 "Frequency offset to correct for crystal calibration errors",
               properties: {
-                suffix: "Hz"
-              }
+                suffix: "Hz",
+              },
             },
             {
               type: "toggle",
               name: "sx126xRxBoostedGain",
               label: "Boosted RX Gain",
-              description: "Boosted RX gain"
+              description: "Boosted RX gain",
             },
             {
               type: "number",
@@ -166,11 +166,11 @@ export const LoRa = (): JSX.Element => {
               label: "Override Frequency",
               description: "Override frequency",
               properties: {
-                suffix: "Hz"
-              }
-            }
-          ]
-        }
+                suffix: "Hz",
+              },
+            },
+          ],
+        },
       ]}
     />
   );

src/components/PageComponents/Config/Network.tsx

@@ -14,11 +14,11 @@ export const Network = (): JSX.Element => {
           value: {
             ...data,
             ipv4Config: new Protobuf.Config_NetworkConfig_IpV4Config(
-              data.ipv4Config
-            )
-          }
-        }
-      })
+              data.ipv4Config,
+            ),
+          },
+        },
+      }),
     );
   };
 
@@ -35,7 +35,7 @@ export const Network = (): JSX.Element => {
               type: "toggle",
               name: "wifiEnabled",
               label: "Enabled",
-              description: "Enable or disable the WiFi radio"
+              description: "Enable or disable the WiFi radio",
             },
             {
               type: "text",
@@ -44,9 +44,9 @@ export const Network = (): JSX.Element => {
               description: "Network name",
               disabledBy: [
                 {
-                  fieldName: "wifiEnabled"
-                }
-              ]
+                  fieldName: "wifiEnabled",
+                },
+              ],
             },
             {
               type: "password",
@@ -55,11 +55,11 @@ export const Network = (): JSX.Element => {
               description: "Network password",
               disabledBy: [
                 {
-                  fieldName: "wifiEnabled"
-                }
-              ]
-            }
-          ]
+                  fieldName: "wifiEnabled",
+                },
+              ],
+            },
+          ],
         },
         {
           label: "Ethernet Config",
@@ -69,9 +69,9 @@ export const Network = (): JSX.Element => {
               type: "toggle",
               name: "ethEnabled",
               label: "Enabled",
-              description: "Enable or disable the Ethernet port"
-            }
-          ]
+              description: "Enable or disable the Ethernet port",
+            },
+          ],
         },
         {
           label: "IP Config",
@@ -83,8 +83,8 @@ export const Network = (): JSX.Element => {
               label: "Address Mode",
               description: "Address assignment selection",
               properties: {
-                enumValue: Protobuf.Config_NetworkConfig_AddressMode
-              }
+                enumValue: Protobuf.Config_NetworkConfig_AddressMode,
+              },
             },
             {
               type: "text",
@@ -94,9 +94,9 @@ export const Network = (): JSX.Element => {
               disabledBy: [
                 {
                   fieldName: "addressMode",
-                  selector: Protobuf.Config_NetworkConfig_AddressMode.DHCP
-                }
-              ]
+                  selector: Protobuf.Config_NetworkConfig_AddressMode.DHCP,
+                },
+              ],
             },
             {
               type: "text",
@@ -106,9 +106,9 @@ export const Network = (): JSX.Element => {
               disabledBy: [
                 {
                   fieldName: "addressMode",
-                  selector: Protobuf.Config_NetworkConfig_AddressMode.DHCP
-                }
-              ]
+                  selector: Protobuf.Config_NetworkConfig_AddressMode.DHCP,
+                },
+              ],
             },
             {
               type: "text",
@@ -118,9 +118,9 @@ export const Network = (): JSX.Element => {
               disabledBy: [
                 {
                   fieldName: "addressMode",
-                  selector: Protobuf.Config_NetworkConfig_AddressMode.DHCP
-                }
-              ]
+                  selector: Protobuf.Config_NetworkConfig_AddressMode.DHCP,
+                },
+              ],
             },
             {
               type: "text",
@@ -130,11 +130,11 @@ export const Network = (): JSX.Element => {
               disabledBy: [
                 {
                   fieldName: "addressMode",
-                  selector: Protobuf.Config_NetworkConfig_AddressMode.DHCP
-                }
-              ]
-            }
-          ]
+                  selector: Protobuf.Config_NetworkConfig_AddressMode.DHCP,
+                },
+              ],
+            },
+          ],
         },
         {
           label: "NTP Config",
@@ -143,9 +143,9 @@ export const Network = (): JSX.Element => {
             {
               type: "text",
               name: "ntpServer",
-              label: "NTP Server"
-            }
-          ]
+              label: "NTP Server",
+            },
+          ],
         },
         {
           label: "Rsyslog Config",
@@ -154,10 +154,10 @@ export const Network = (): JSX.Element => {
             {
               type: "text",
               name: "rsyslogServer",
-              label: "Rsyslog Server"
-            }
-          ]
-        }
+              label: "Rsyslog Server",
+            },
+          ],
+        },
       ]}
     />
   );

src/components/PageComponents/Config/Position.tsx

@@ -1,7 +1,7 @@
 import type { PositionValidation } from "@app/validation/config/position.js";
+import { DynamicForm } from "@components/Form/DynamicForm.js";
 import { useDevice } from "@core/stores/deviceStore.js";
 import { Protobuf } from "@meshtastic/meshtasticjs";
-import { DynamicForm } from "@components/Form/DynamicForm.js";
 
 export const Position = (): JSX.Element => {
   const { config, nodes, hardware, setWorkingConfig } = useDevice();
@@ -11,9 +11,9 @@ export const Position = (): JSX.Element => {
       new Protobuf.Config({
         payloadVariant: {
           case: "position",
-          value: data
-        }
-      })
+          value: data,
+        },
+      }),
     );
   };
 
@@ -31,20 +31,20 @@ export const Position = (): JSX.Element => {
               name: "positionBroadcastSmartEnabled",
               label: "Enable Smart Position",
               description:
-                "Only send position when there has been a meaningful change in location"
+                "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"
+                "Don't report GPS position, but a manually-specified one",
             },
             {
               type: "toggle",
               name: "gpsEnabled",
               label: "GPS Enabled",
-              description: "Enable the internal GPS module"
+              description: "Enable the internal GPS module",
             },
             {
               type: "multiSelect",
@@ -52,22 +52,22 @@ export const Position = (): JSX.Element => {
               label: "Position Flags",
               description: "Configuration options for Position messages",
               properties: {
-                enumValue: Protobuf.Config_PositionConfig_PositionFlags
-              }
+                enumValue: Protobuf.Config_PositionConfig_PositionFlags,
+              },
             },
             {
               type: "number",
               name: "rxGpio",
               label: "Receive Pin",
-              description: "GPS Module RX pin override"
+              description: "GPS Module RX pin override",
             },
             {
               type: "number",
               name: "txGpio",
               label: "Transmit Pin",
-              description: "GPS Module TX pin override"
-            }
-          ]
+              description: "GPS Module TX pin override",
+            },
+          ],
         },
         {
           label: "Intervals",
@@ -77,22 +77,46 @@ export const Position = (): JSX.Element => {
               type: "number",
               name: "positionBroadcastSecs",
               label: "Broadcast Interval",
-              description: "How often your position is sent out over the mesh"
+              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"
+              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"
-            }
-          ]
-        }
+              description: "How long the device will try to get a fix for",
+            },
+            {
+              type: "number",
+              name: "broadcastSmartMinimumDistance",
+              label: "Smart Position Minimum Distance",
+              description:
+                "Minimum distance (in meters) that must be traveled before a position update is sent",
+              disabledBy: [
+                {
+                  fieldName: "positionBroadcastSmartEnabled",
+                },
+              ],
+            },
+            {
+              type: "number",
+              name: "broadcastSmartMinimumIntervalSecs",
+              label: "Smart Position Minimum Interval",
+              description:
+                "Minimum interval (in seconds) that must pass before a position update is sent",
+              disabledBy: [
+                {
+                  fieldName: "positionBroadcastSmartEnabled",
+                },
+              ],
+            },
+          ],
+        },
       ]}
     />
   );

src/components/PageComponents/Config/Power.tsx

@@ -1,7 +1,7 @@
 import type { PowerValidation } from "@app/validation/config/power.js";
+import { DynamicForm } from "@components/Form/DynamicForm.js";
 import { useDevice } from "@core/stores/deviceStore.js";
 import { Protobuf } from "@meshtastic/meshtasticjs";
-import { DynamicForm } from "@components/Form/DynamicForm.js";
 
 export const Power = (): JSX.Element => {
   const { config, setWorkingConfig } = useDevice();
@@ -11,9 +11,9 @@ export const Power = (): JSX.Element => {
       new Protobuf.Config({
         payloadVariant: {
           case: "power",
-          value: data
-        }
-      })
+          value: data,
+        },
+      }),
     );
   };
 
@@ -31,7 +31,7 @@ export const Power = (): JSX.Element => {
               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."
+                "Select if powered from a low-current source (i.e. solar), to minimize power consumption as much as possible.",
             },
             {
               type: "number",
@@ -40,14 +40,14 @@ export const Power = (): JSX.Element => {
               description:
                 "Automatically shutdown node after this long when on battery, 0 for indefinite",
               properties: {
-                suffix: "Seconds"
-              }
+                suffix: "Seconds",
+              },
             },
             {
               type: "number",
               name: "adcMultiplierOverride",
               label: "ADC Multiplier Override ratio",
-              description: "Used for tweaking battery voltage reading"
+              description: "Used for tweaking battery voltage reading",
             },
             {
               type: "number",
@@ -56,10 +56,16 @@ export const Power = (): JSX.Element => {
               description:
                 "If the device does not receive a Bluetooth connection, the BLE radio will be disabled after this long",
               properties: {
-                suffix: "Seconds"
-              }
-            }
-          ]
+                suffix: "Seconds",
+              },
+            },
+            {
+              type: "number",
+              name: "deviceBatteryInaAddress",
+              label: "INA219 Address",
+              description: "Address of the INA219 battery monitor",
+            },
+          ],
         },
         {
           label: "Sleep Settings",
@@ -72,8 +78,8 @@ export const Power = (): JSX.Element => {
               description:
                 "The device will enter super deep sleep after this time",
               properties: {
-                suffix: "Seconds"
-              }
+                suffix: "Seconds",
+              },
             },
             {
               type: "number",
@@ -82,8 +88,8 @@ export const Power = (): JSX.Element => {
               description:
                 "How long the device will be in super deep sleep for",
               properties: {
-                suffix: "Seconds"
-              }
+                suffix: "Seconds",
+              },
             },
             {
               type: "number",
@@ -91,8 +97,8 @@ export const Power = (): JSX.Element => {
               label: "Light Sleep Duration",
               description: "How long the device will be in light sleep for",
               properties: {
-                suffix: "Seconds"
-              }
+                suffix: "Seconds",
+              },
             },
             {
               type: "number",
@@ -101,11 +107,11 @@ export const Power = (): JSX.Element => {
               description:
                 "Minimum amount of time the device will stay awake for after receiving a packet",
               properties: {
-                suffix: "Seconds"
-              }
-            }
-          ]
-        }
+                suffix: "Seconds",
+              },
+            },
+          ],
+        },
       ]}
     />
   );

src/components/PageComponents/Connect/BLE.tsx

@@ -26,7 +26,7 @@ export const BLE = (): JSX.Element => {
     setSelectedDevice(id);
     const connection = new IBLEConnection(id);
     await connection.connect({
-      device: BLEDevice
+      device: BLEDevice,
     });
     device.addConnection(connection);
     subscribeAll(device, connection);
@@ -53,7 +53,7 @@ export const BLE = (): JSX.Element => {
         onClick={() => {
           void navigator.bluetooth
             .requestDevice({
-              filters: [{ services: [Constants.serviceUUID] }]
+              filters: [{ services: [Constants.serviceUUID] }],
             })
             .then((device) => {
               const exists = bleDevices.findIndex((d) => d.id === device.id);

src/components/PageComponents/Connect/HTTP.tsx

@@ -19,18 +19,18 @@ export const HTTP = (): JSX.Element => {
   }>({
     defaultValues: {
       ip: ["client.meshtastic.org", "localhost"].includes(
-        window.location.hostname
+        window.location.hostname,
       )
         ? "meshtastic.local"
         : window.location.hostname,
-      tls: location.protocol === "https:"
-    }
+      tls: location.protocol === "https:",
+    },
   });
 
   const TLSEnabled = useWatch({
     control,
     name: "tls",
-    defaultValue: location.protocol === "https:"
+    defaultValue: location.protocol === "https:",
   });
 
   const onSubmit = handleSubmit((data) => {
@@ -42,7 +42,7 @@ export const HTTP = (): JSX.Element => {
     void connection.connect({
       address: data.ip,
       fetchInterval: 2000,
-      tls: data.tls
+      tls: data.tls,
     });
     device.addConnection(connection);
     subscribeAll(device, connection);

src/components/PageComponents/Connect/Serial.tsx

@@ -35,7 +35,7 @@ export const Serial = (): JSX.Element => {
       .connect({
         port,
         baudRate: undefined,
-        concurrentLogOutput: true
+        concurrentLogOutput: true,
       })
       .catch((e: Error) => console.log(`Unable to Connect: ${e.message}`));
     device.addConnection(connection);

src/components/PageComponents/Messages/ChannelChat.tsx

@@ -14,7 +14,7 @@ export interface ChannelChatProps {
 export const ChannelChat = ({
   messages,
   channel,
-  to
+  to,
 }: ChannelChatProps): JSX.Element => {
   const { nodes } = useDevice();
 

src/components/PageComponents/Messages/Message.tsx

@@ -2,7 +2,7 @@ import { Hashicon } from "@emeraldpay/hashicon-react";
 import {
   CircleEllipsisIcon,
   AlertCircleIcon,
-  CheckCircle2Icon
+  CheckCircle2Icon,
 } from "lucide-react";
 import type { Protobuf } from "@meshtastic/meshtasticjs";
 import type { MessageWithState } from "@app/core/stores/deviceStore.js";
@@ -16,7 +16,7 @@ export interface MessageProps {
 export const Message = ({
   lastMsgSameUser,
   message,
-  sender
+  sender,
 }: MessageProps): JSX.Element => {
   return lastMsgSameUser ? (
     <div className="ml-5 flex">
@@ -47,7 +47,7 @@ export const Message = ({
         <span className="mt-1 font-mono text-xs text-textSecondary">
           {message.rxTime.toLocaleTimeString(undefined, {
             hour: "2-digit",
-            minute: "2-digit"
+            minute: "2-digit",
           })}
         </span>
       </div>

src/components/PageComponents/Messages/MessageInput.tsx

@@ -11,14 +11,14 @@ export interface MessageInputProps {
 
 export const MessageInput = ({
   to,
-  channel
+  channel,
 }: MessageInputProps): JSX.Element => {
   const {
     connection,
     setMessageState,
     messageDraft,
     setMessageDraft,
-    hardware
+    hardware,
   } = useDevice();
 
   const myNodeNum = hardware.myNodeNum;
@@ -33,8 +33,8 @@ export const MessageInput = ({
           to as number,
           myNodeNum,
           id,
-          "ack"
-        )
+          "ack",
+        ),
       )
       .catch((e: Types.PacketError) =>
         setMessageState(
@@ -43,8 +43,8 @@ export const MessageInput = ({
           to as number,
           myNodeNum,
           e.id,
-          e.error
-        )
+          e.error,
+        ),
       );
   };
 

src/components/PageComponents/ModuleConfig/Audio.tsx

@@ -11,9 +11,9 @@ export const Audio = (): JSX.Element => {
       new Protobuf.ModuleConfig({
         payloadVariant: {
           case: "audio",
-          value: data
-        }
-      })
+          value: data,
+        },
+      }),
     );
   };
 
@@ -30,13 +30,13 @@ export const Audio = (): JSX.Element => {
               type: "toggle",
               name: "codec2Enabled",
               label: "Codec 2 Enabled",
-              description: "Enable Codec 2 audio encoding"
+              description: "Enable Codec 2 audio encoding",
             },
             {
               type: "number",
               name: "pttPin",
               label: "PTT Pin",
-              description: "GPIO pin to use for PTT"
+              description: "GPIO pin to use for PTT",
             },
             {
               type: "select",
@@ -44,35 +44,35 @@ export const Audio = (): JSX.Element => {
               label: "Bitrate",
               description: "Bitrate to use for audio encoding",
               properties: {
-                enumValue: Protobuf.ModuleConfig_AudioConfig_Audio_Baud
-              }
+                enumValue: Protobuf.ModuleConfig_AudioConfig_Audio_Baud,
+              },
             },
             {
               type: "number",
               name: "i2sWs",
               label: "i2S WS",
-              description: "GPIO pin to use for 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"
+              description: "GPIO pin to use for i2S SD",
             },
             {
               type: "number",
               name: "i2sDin",
               label: "i2S DIN",
-              description: "GPIO pin to use for 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"
-            }
-          ]
-        }
+              description: "GPIO pin to use for i2S SCK",
+            },
+          ],
+        },
       ]}
     />
   );

src/components/PageComponents/ModuleConfig/CannedMessage.tsx

@@ -11,9 +11,9 @@ export const CannedMessage = (): JSX.Element => {
       new Protobuf.ModuleConfig({
         payloadVariant: {
           case: "cannedMessage",
-          value: data
-        }
-      })
+          value: data,
+        },
+      }),
     );
   };
 
@@ -30,25 +30,25 @@ export const CannedMessage = (): JSX.Element => {
               type: "toggle",
               name: "rotary1Enabled",
               label: "Rotary Encoder #1 Enabled",
-              description: "Enable the rotary encoder"
+              description: "Enable the rotary encoder",
             },
             {
               type: "number",
               name: "inputbrokerPinA",
               label: "Encoder Pin A",
-              description: "GPIO Pin Value (1-39) For encoder port 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"
+              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"
+              description: "GPIO Pin Value (1-39) For encoder Press",
             },
             {
               type: "select",
@@ -57,8 +57,8 @@ export const CannedMessage = (): JSX.Element => {
               description: "Select input event.",
               properties: {
                 enumValue:
-                  Protobuf.ModuleConfig_CannedMessageConfig_InputEventChar
-              }
+                  Protobuf.ModuleConfig_CannedMessageConfig_InputEventChar,
+              },
             },
             {
               type: "select",
@@ -67,8 +67,8 @@ export const CannedMessage = (): JSX.Element => {
               description: "Select input event.",
               properties: {
                 enumValue:
-                  Protobuf.ModuleConfig_CannedMessageConfig_InputEventChar
-              }
+                  Protobuf.ModuleConfig_CannedMessageConfig_InputEventChar,
+              },
             },
             {
               type: "select",
@@ -77,30 +77,30 @@ export const CannedMessage = (): JSX.Element => {
               description: "Select input event",
               properties: {
                 enumValue:
-                  Protobuf.ModuleConfig_CannedMessageConfig_InputEventChar
-              }
+                  Protobuf.ModuleConfig_CannedMessageConfig_InputEventChar,
+              },
             },
             {
               type: "toggle",
               name: "updown1Enabled",
               label: "Up Down enabled",
-              description: "Enable the up / down encoder"
+              description: "Enable the up / down encoder",
             },
             {
               type: "text",
               name: "allowInputSource",
               label: "Allow Input Source",
               description:
-                "Select from: '_any', 'rotEnc1', 'upDownEnc1', 'cardkb'"
+                "Select from: '_any', 'rotEnc1', 'upDownEnc1', 'cardkb'",
             },
             {
               type: "toggle",
               name: "sendBell",
               label: "Send Bell",
-              description: "Sends a bell character with each message"
-            }
-          ]
-        }
+              description: "Sends a bell character with each message",
+            },
+          ],
+        },
       ]}
     />
   );

src/components/PageComponents/ModuleConfig/ExternalNotification.tsx

@@ -11,9 +11,9 @@ export const ExternalNotification = (): JSX.Element => {
       new Protobuf.ModuleConfig({
         payloadVariant: {
           case: "externalNotification",
-          value: data
-        }
-      })
+          value: data,
+        },
+      }),
     );
   };
 
@@ -30,7 +30,7 @@ export const ExternalNotification = (): JSX.Element => {
               type: "toggle",
               name: "enabled",
               label: "Module Enabled",
-              description: "Enable External Notification"
+              description: "Enable External Notification",
             },
             {
               type: "number",
@@ -40,12 +40,12 @@ export const ExternalNotification = (): JSX.Element => {
 
               disabledBy: [
                 {
-                  fieldName: "enabled"
-                }
+                  fieldName: "enabled",
+                },
               ],
               properties: {
-                suffix: "ms"
-              }
+                suffix: "ms",
+              },
             },
             {
               type: "number",
@@ -54,9 +54,9 @@ export const ExternalNotification = (): JSX.Element => {
               description: "Output",
               disabledBy: [
                 {
-                  fieldName: "enabled"
-                }
-              ]
+                  fieldName: "enabled",
+                },
+              ],
             },
             {
               type: "number",
@@ -65,9 +65,9 @@ export const ExternalNotification = (): JSX.Element => {
               description: "Output Vibrate",
               disabledBy: [
                 {
-                  fieldName: "enabled"
-                }
-              ]
+                  fieldName: "enabled",
+                },
+              ],
             },
             {
               type: "number",
@@ -76,9 +76,9 @@ export const ExternalNotification = (): JSX.Element => {
               description: "Output Buzzer",
               disabledBy: [
                 {
-                  fieldName: "enabled"
-                }
-              ]
+                  fieldName: "enabled",
+                },
+              ],
             },
             {
               type: "toggle",
@@ -87,9 +87,9 @@ export const ExternalNotification = (): JSX.Element => {
               description: "Active",
               disabledBy: [
                 {
-                  fieldName: "enabled"
-                }
-              ]
+                  fieldName: "enabled",
+                },
+              ],
             },
             {
               type: "toggle",
@@ -98,9 +98,9 @@ export const ExternalNotification = (): JSX.Element => {
               description: "Alert Message",
               disabledBy: [
                 {
-                  fieldName: "enabled"
-                }
-              ]
+                  fieldName: "enabled",
+                },
+              ],
             },
             {
               type: "toggle",
@@ -109,9 +109,9 @@ export const ExternalNotification = (): JSX.Element => {
               description: "Alert Message Vibrate",
               disabledBy: [
                 {
-                  fieldName: "enabled"
-                }
-              ]
+                  fieldName: "enabled",
+                },
+              ],
             },
             {
               type: "toggle",
@@ -120,9 +120,9 @@ export const ExternalNotification = (): JSX.Element => {
               description: "Alert Message Buzzer",
               disabledBy: [
                 {
-                  fieldName: "enabled"
-                }
-              ]
+                  fieldName: "enabled",
+                },
+              ],
             },
             {
               type: "toggle",
@@ -132,9 +132,9 @@ export const ExternalNotification = (): JSX.Element => {
                 "Should an alert be triggered when receiving an incoming bell?",
               disabledBy: [
                 {
-                  fieldName: "enabled"
-                }
-              ]
+                  fieldName: "enabled",
+                },
+              ],
             },
             {
               type: "toggle",
@@ -143,9 +143,9 @@ export const ExternalNotification = (): JSX.Element => {
               description: "Alert Bell Vibrate",
               disabledBy: [
                 {
-                  fieldName: "enabled"
-                }
-              ]
+                  fieldName: "enabled",
+                },
+              ],
             },
             {
               type: "toggle",
@@ -154,9 +154,9 @@ export const ExternalNotification = (): JSX.Element => {
               description: "Alert Bell Buzzer",
               disabledBy: [
                 {
-                  fieldName: "enabled"
-                }
-              ]
+                  fieldName: "enabled",
+                },
+              ],
             },
             {
               type: "toggle",
@@ -165,9 +165,9 @@ export const ExternalNotification = (): JSX.Element => {
               description: "Use PWM",
               disabledBy: [
                 {
-                  fieldName: "enabled"
-                }
-              ]
+                  fieldName: "enabled",
+                },
+              ],
             },
             {
               type: "number",
@@ -176,12 +176,12 @@ export const ExternalNotification = (): JSX.Element => {
               description: "Nag Timeout",
               disabledBy: [
                 {
-                  fieldName: "enabled"
-                }
-              ]
-            }
-          ]
-        }
+                  fieldName: "enabled",
+                },
+              ],
+            },
+          ],
+        },
       ]}
     />
   );

src/components/PageComponents/ModuleConfig/MQTT.tsx

@@ -1,7 +1,7 @@
-import type { MQTTValidation } from "@app/validation/moduleConfig/mqtt.js";
-import { Protobuf } from "@meshtastic/meshtasticjs";
-import { DynamicForm } from "@components/Form/DynamicForm.js";
 import { useDevice } from "@app/core/stores/deviceStore.js";
+import type { MQTTValidation } from "@app/validation/moduleConfig/mqtt.js";
+import { DynamicForm } from "@components/Form/DynamicForm.js";
+import { Protobuf } from "@meshtastic/meshtasticjs";
 
 export const MQTT = (): JSX.Element => {
   const { moduleConfig, setWorkingModuleConfig } = useDevice();
@@ -11,9 +11,9 @@ export const MQTT = (): JSX.Element => {
       new Protobuf.ModuleConfig({
         payloadVariant: {
           case: "mqtt",
-          value: data
-        }
-      })
+          value: data,
+        },
+      }),
     );
   };
 
@@ -30,7 +30,7 @@ export const MQTT = (): JSX.Element => {
               type: "toggle",
               name: "enabled",
               label: "Enabled",
-              description: "Enable or disable MQTT"
+              description: "Enable or disable MQTT",
             },
             {
               type: "text",
@@ -40,9 +40,9 @@ export const MQTT = (): JSX.Element => {
                 "MQTT server address to use for default/custom servers",
               disabledBy: [
                 {
-                  fieldName: "enabled"
-                }
-              ]
+                  fieldName: "enabled",
+                },
+              ],
             },
             {
               type: "text",
@@ -51,9 +51,9 @@ export const MQTT = (): JSX.Element => {
               description: "MQTT username to use for default/custom servers",
               disabledBy: [
                 {
-                  fieldName: "enabled"
-                }
-              ]
+                  fieldName: "enabled",
+                },
+              ],
             },
             {
               type: "password",
@@ -62,9 +62,9 @@ export const MQTT = (): JSX.Element => {
               description: "MQTT password to use for default/custom servers",
               disabledBy: [
                 {
-                  fieldName: "enabled"
-                }
-              ]
+                  fieldName: "enabled",
+                },
+              ],
             },
             {
               type: "toggle",
@@ -73,9 +73,9 @@ export const MQTT = (): JSX.Element => {
               description: "Enable or disable MQTT encryption",
               disabledBy: [
                 {
-                  fieldName: "enabled"
-                }
-              ]
+                  fieldName: "enabled",
+                },
+              ],
             },
             {
               type: "toggle",
@@ -84,12 +84,46 @@ export const MQTT = (): JSX.Element => {
               description: "Whether to send/consume JSON packets on MQTT",
               disabledBy: [
                 {
-                  fieldName: "enabled"
-                }
-              ]
-            }
-          ]
-        }
+                  fieldName: "enabled",
+                },
+              ],
+            },
+            {
+              type: "toggle",
+              name: "tlsEnabled",
+              label: "TLS Enabled",
+              description: "Enable or disable TLS",
+              disabledBy: [
+                {
+                  fieldName: "enabled",
+                },
+              ],
+            },
+            {
+              type: "text",
+              name: "root",
+              label: "Root topic",
+              description: "MQTT root topic to use for default/custom servers",
+              disabledBy: [
+                {
+                  fieldName: "enabled",
+                },
+              ],
+            },
+            {
+              type: "toggle",
+              name: "proxyToClientEnabled",
+              label: "Proxy to Client Enabled",
+              description:
+                "Whether to proxy MQTT packets to the client (for example to Home Assistant)",
+              disabledBy: [
+                {
+                  fieldName: "enabled",
+                },
+              ],
+            },
+          ],
+        },
       ]}
     />
   );

src/components/PageComponents/ModuleConfig/RangeTest.tsx

@@ -11,9 +11,9 @@ export const RangeTest = (): JSX.Element => {
       new Protobuf.ModuleConfig({
         payloadVariant: {
           case: "rangeTest",
-          value: data
-        }
-      })
+          value: data,
+        },
+      }),
     );
   };
 
@@ -30,7 +30,7 @@ export const RangeTest = (): JSX.Element => {
               type: "toggle",
               name: "enabled",
               label: "Module Enabled",
-              description: "Enable Range Test"
+              description: "Enable Range Test",
             },
             {
               type: "number",
@@ -39,9 +39,9 @@ export const RangeTest = (): JSX.Element => {
               description: "How long to wait between sending test packets",
               disabledBy: [
                 {
-                  fieldName: "enabled"
-                }
-              ]
+                  fieldName: "enabled",
+                },
+              ],
             },
             {
               type: "toggle",
@@ -50,12 +50,12 @@ export const RangeTest = (): JSX.Element => {
               description: "ESP32 Only",
               disabledBy: [
                 {
-                  fieldName: "enabled"
-                }
-              ]
-            }
-          ]
-        }
+                  fieldName: "enabled",
+                },
+              ],
+            },
+          ],
+        },
       ]}
     />
   );

src/components/PageComponents/ModuleConfig/Serial.tsx

@@ -1,7 +1,7 @@
 import type { SerialValidation } from "@app/validation/moduleConfig/serial.js";
+import { DynamicForm } from "@components/Form/DynamicForm.js";
 import { useDevice } from "@core/stores/deviceStore.js";
 import { Protobuf } from "@meshtastic/meshtasticjs";
-import { DynamicForm } from "@components/Form/DynamicForm.js";
 
 export const Serial = (): JSX.Element => {
   const { moduleConfig, setWorkingModuleConfig } = useDevice();
@@ -11,9 +11,9 @@ export const Serial = (): JSX.Element => {
       new Protobuf.ModuleConfig({
         payloadVariant: {
           case: "serial",
-          value: data
-        }
-      })
+          value: data,
+        },
+      }),
     );
   };
 
@@ -30,7 +30,7 @@ export const Serial = (): JSX.Element => {
               type: "toggle",
               name: "enabled",
               label: "Module Enabled",
-              description: "Enable Serial output"
+              description: "Enable Serial output",
             },
             {
               type: "toggle",
@@ -40,9 +40,9 @@ export const Serial = (): JSX.Element => {
                 "Any packets you send will be echoed back to your device",
               disabledBy: [
                 {
-                  fieldName: "enabled"
-                }
-              ]
+                  fieldName: "enabled",
+                },
+              ],
             },
             {
               type: "number",
@@ -51,9 +51,9 @@ export const Serial = (): JSX.Element => {
               description: "Set the GPIO pin to the RXD pin you have set up.",
               disabledBy: [
                 {
-                  fieldName: "enabled"
-                }
-              ]
+                  fieldName: "enabled",
+                },
+              ],
             },
             {
               type: "number",
@@ -62,9 +62,9 @@ export const Serial = (): JSX.Element => {
               description: "Set the GPIO pin to the TXD pin you have set up.",
               disabledBy: [
                 {
-                  fieldName: "enabled"
-                }
-              ]
+                  fieldName: "enabled",
+                },
+              ],
             },
             {
               type: "select",
@@ -74,12 +74,12 @@ export const Serial = (): JSX.Element => {
 
               disabledBy: [
                 {
-                  fieldName: "enabled"
-                }
+                  fieldName: "enabled",
+                },
               ],
               properties: {
-                enumValue: Protobuf.ModuleConfig_SerialConfig_Serial_Baud
-              }
+                enumValue: Protobuf.ModuleConfig_SerialConfig_Serial_Baud,
+              },
             },
             {
               type: "number",
@@ -90,12 +90,12 @@ export const Serial = (): JSX.Element => {
                 "Seconds to wait before we consider your packet as 'done'",
               disabledBy: [
                 {
-                  fieldName: "enabled"
-                }
+                  fieldName: "enabled",
+                },
               ],
               properties: {
-                suffix: "Seconds"
-              }
+                suffix: "Seconds",
+              },
             },
             {
               type: "select",
@@ -105,16 +105,23 @@ export const Serial = (): JSX.Element => {
 
               disabledBy: [
                 {
-                  fieldName: "enabled"
-                }
+                  fieldName: "enabled",
+                },
               ],
               properties: {
                 enumValue: Protobuf.ModuleConfig_SerialConfig_Serial_Mode,
-                formatEnumName: true
-              }
-            }
-          ]
-        }
+                formatEnumName: true,
+              },
+            },
+            {
+              type: "toggle",
+              name: "overrideConsoleSerialPort",
+              label: "Override Console Serial Port",
+              description:
+                "If you have a serial port connected to the console, this will override it.",
+            },
+          ],
+        },
       ]}
     />
   );

src/components/PageComponents/ModuleConfig/StoreForward.tsx

@@ -11,9 +11,9 @@ export const StoreForward = (): JSX.Element => {
       new Protobuf.ModuleConfig({
         payloadVariant: {
           case: "storeForward",
-          value: data
-        }
-      })
+          value: data,
+        },
+      }),
     );
   };
 
@@ -30,7 +30,7 @@ export const StoreForward = (): JSX.Element => {
               type: "toggle",
               name: "enabled",
               label: "Module Enabled",
-              description: "Enable Store & Forward"
+              description: "Enable Store & Forward",
             },
             {
               type: "toggle",
@@ -39,9 +39,9 @@ export const StoreForward = (): JSX.Element => {
               description: "Enable Store & Forward heartbeat",
               disabledBy: [
                 {
-                  fieldName: "enabled"
-                }
-              ]
+                  fieldName: "enabled",
+                },
+              ],
             },
             {
               type: "number",
@@ -51,12 +51,12 @@ export const StoreForward = (): JSX.Element => {
 
               disabledBy: [
                 {
-                  fieldName: "enabled"
-                }
+                  fieldName: "enabled",
+                },
               ],
               properties: {
-                suffix: "Records"
-              }
+                suffix: "Records",
+              },
             },
             {
               type: "number",
@@ -65,9 +65,9 @@ export const StoreForward = (): JSX.Element => {
               description: "Max number of records to return",
               disabledBy: [
                 {
-                  fieldName: "enabled"
-                }
-              ]
+                  fieldName: "enabled",
+                },
+              ],
             },
             {
               type: "number",
@@ -76,12 +76,12 @@ export const StoreForward = (): JSX.Element => {
               description: "Max number of records to return",
               disabledBy: [
                 {
-                  fieldName: "enabled"
-                }
-              ]
-            }
-          ]
-        }
+                  fieldName: "enabled",
+                },
+              ],
+            },
+          ],
+        },
       ]}
     />
   );

src/components/PageComponents/ModuleConfig/Telemetry.tsx

@@ -1,7 +1,7 @@
 import type { TelemetryValidation } from "@app/validation/moduleConfig/telemetry.js";
+import { DynamicForm } from "@components/Form/DynamicForm.js";
 import { useDevice } from "@core/stores/deviceStore.js";
 import { Protobuf } from "@meshtastic/meshtasticjs";
-import { DynamicForm } from "@components/Form/DynamicForm.js";
 
 export const Telemetry = (): JSX.Element => {
   const { moduleConfig, setWorkingModuleConfig } = useDevice();
@@ -11,9 +11,9 @@ export const Telemetry = (): JSX.Element => {
       new Protobuf.ModuleConfig({
         payloadVariant: {
           case: "telemetry",
-          value: data
-        }
-      })
+          value: data,
+        },
+      }),
     );
   };
 
@@ -32,8 +32,8 @@ export const Telemetry = (): JSX.Element => {
               label: "Query Interval",
               description: "Interval to get telemetry data",
               properties: {
-                suffix: "seconds"
-              }
+                suffix: "seconds",
+              },
             },
             {
               type: "number",
@@ -41,29 +41,41 @@ export const Telemetry = (): JSX.Element => {
               label: "Update Interval",
               description: "How often to send Metrics over the mesh",
               properties: {
-                suffix: "seconds"
-              }
+                suffix: "seconds",
+              },
             },
             {
               type: "toggle",
               name: "environmentMeasurementEnabled",
               label: "Module Enabled",
-              description: "Enable the Environment Telemetry"
+              description: "Enable the Environment Telemetry",
             },
             {
               type: "toggle",
               name: "environmentScreenEnabled",
               label: "Displayed on Screen",
-              description: "Show the Telemetry Module on the OLED"
+              description: "Show the Telemetry Module on the OLED",
             },
             {
               type: "toggle",
               name: "environmentDisplayFahrenheit",
               label: "Display Fahrenheit",
-              description: "Display temp in Fahrenheit"
-            }
-          ]
-        }
+              description: "Display temp in Fahrenheit",
+            },
+            {
+              type: "toggle",
+              name: "airQualityEnabled",
+              label: "Air Quality Enabled",
+              description: "Enable the Air Quality Telemetry",
+            },
+            {
+              type: "number",
+              name: "airQualityInterval",
+              label: "Air Quality Update Interval",
+              description: "How often to send Air Quality data over the mesh",
+            },
+          ],
+        },
       ]}
     />
   );

src/components/PageLayout.tsx

@@ -15,7 +15,7 @@ export const PageLayout = ({
   label,
   noPadding,
   actions,
-  children
+  children,
 }: PageLayoutProps): JSX.Element => {
   return (
     <div className="relative flex h-full w-full flex-col">
@@ -43,7 +43,7 @@ export const PageLayout = ({
       <div
         className={cn(
           "flex h-full w-full flex-col overflow-y-auto",
-          !noPadding && "p-3"
+          !noPadding && "p-3",
         )}
       >
         {children}

src/components/Sidebar.tsx

@@ -8,7 +8,7 @@ import {
   LayersIcon,
   UsersIcon,
   EditIcon,
-  LayoutGrid
+  LayoutGrid,
 } from "lucide-react";
 import { Subtle } from "@components/UI/Typography/Subtle.js";
 import { SidebarSection } from "@components/UI/Sidebar/SidebarSection.js";
@@ -33,28 +33,28 @@ export const Sidebar = ({ children }: SidebarProps): JSX.Element => {
     {
       name: "Messages",
       icon: MessageSquareIcon,
-      page: "messages"
+      page: "messages",
     },
     {
       name: "Map",
       icon: MapIcon,
-      page: "map"
+      page: "map",
     },
     {
       name: "Config",
       icon: SettingsIcon,
-      page: "config"
+      page: "config",
     },
     {
       name: "Channels",
       icon: LayersIcon,
-      page: "channels"
+      page: "channels",
     },
     {
       name: "Peers",
       icon: UsersIcon,
-      page: "peers"
-    }
+      page: "peers",
+    },
   ];
 
   return (

src/components/Toaster.tsx

@@ -6,7 +6,7 @@ import {
   ToastDescription,
   ToastProvider,
   ToastTitle,
-  ToastViewport
+  ToastViewport,
 } from "@components/UI/Toast.js";
 
 export function Toaster() {

src/components/UI/Button.tsx

@@ -18,19 +18,19 @@ const buttonVariants = cva(
           "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"
+        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"
-      }
+        lg: "h-11 px-8 rounded-md",
+      },
     },
     defaultVariants: {
       variant: "default",
-      size: "default"
-    }
-  }
+      size: "default",
+    },
+  },
 );
 
 export interface ButtonProps
@@ -46,7 +46,7 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
         {...props}
       />
     );
-  }
+  },
 );
 Button.displayName = "Button";
 

src/components/UI/Checkbox.tsx

@@ -12,7 +12,7 @@ const Checkbox = React.forwardRef<
     ref={ref}
     className={cn(
       "peer h-4 w-4 shrink-0 rounded-sm border border-slate-300 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
+      className,
     )}
     {...props}
   >

src/components/UI/Command.tsx

@@ -14,7 +14,7 @@ const Command = React.forwardRef<
     ref={ref}
     className={cn(
       "flex h-full w-full flex-col overflow-hidden rounded-lg bg-white dark:bg-slate-800",
-      className
+      className,
     )}
     {...props}
   />
@@ -48,7 +48,7 @@ const CommandInput = React.forwardRef<
       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
+        className,
       )}
       {...props}
     />
@@ -91,7 +91,7 @@ const CommandGroup = React.forwardRef<
     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
+      className,
     )}
     {...props}
   />
@@ -119,7 +119,7 @@ const CommandItem = React.forwardRef<
     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
+      className,
     )}
     {...props}
   />
@@ -135,7 +135,7 @@ const CommandShortcut = ({
     <span
       className={cn(
         "ml-auto text-xs tracking-widest text-slate-500",
-        className
+        className,
       )}
       {...props}
     />
@@ -152,5 +152,5 @@ export {
   CommandGroup,
   CommandItem,
   CommandShortcut,
-  CommandSeparator
+  CommandSeparator,
 };

src/components/UI/Dialog.tsx

@@ -28,7 +28,7 @@ const DialogOverlay = React.forwardRef<
   <DialogPrimitive.Overlay
     className={cn(
       "fixed inset-0 z-50 bg-black/50 backdrop-blur-sm transition-opacity animate-in fade-in",
-      className
+      className,
     )}
     {...props}
     ref={ref}
@@ -47,7 +47,7 @@ const DialogContent = React.forwardRef<
       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
+        className,
       )}
       {...props}
     >
@@ -68,7 +68,7 @@ const DialogHeader = ({
   <div
     className={cn(
       "flex flex-col space-y-2 text-center sm:text-left",
-      className
+      className,
     )}
     {...props}
   />
@@ -82,7 +82,7 @@ const DialogFooter = ({
   <div
     className={cn(
       "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
-      className
+      className,
     )}
     {...props}
   />
@@ -98,7 +98,7 @@ const DialogTitle = React.forwardRef<
     className={cn(
       "text-lg font-semibold text-slate-900",
       "dark:text-slate-50",
-      className
+      className,
     )}
     {...props}
   />
@@ -124,5 +124,5 @@ export {
   DialogHeader,
   DialogFooter,
   DialogTitle,
-  DialogDescription
+  DialogDescription,
 };

src/components/UI/DropdownMenu.tsx

@@ -27,7 +27,7 @@ const DropdownMenuSubTrigger = React.forwardRef<
     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
+      className,
     )}
     {...props}
   >
@@ -46,7 +46,7 @@ const DropdownMenuSubContent = React.forwardRef<
     ref={ref}
     className={cn(
       "z-50 min-w-[8rem] overflow-hidden rounded-md border border-slate-100 bg-white p-1 text-slate-700 shadow-md animate-in slide-in-from-left-1 dark:border-slate-800 dark:bg-slate-800 dark:text-slate-400",
-      className
+      className,
     )}
     {...props}
   />
@@ -64,7 +64,7 @@ const DropdownMenuContent = React.forwardRef<
       sideOffset={sideOffset}
       className={cn(
         "z-50 min-w-[8rem] overflow-hidden rounded-md border border-slate-100 bg-white p-1 text-slate-700 shadow-md animate-in data-[side=right]:slide-in-from-left-2 data-[side=left]:slide-in-from-right-2 data-[side=bottom]:slide-in-from-top-2 data-[side=top]:slide-in-from-bottom-2 dark:border-slate-800 dark:bg-slate-800 dark:text-slate-400",
-        className
+        className,
       )}
       {...props}
     />
@@ -83,7 +83,7 @@ const DropdownMenuItem = React.forwardRef<
     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
+      className,
     )}
     {...props}
   />
@@ -98,7 +98,7 @@ const DropdownMenuCheckboxItem = React.forwardRef<
     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
+      className,
     )}
     checked={checked}
     {...props}
@@ -122,7 +122,7 @@ const DropdownMenuRadioItem = React.forwardRef<
     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
+      className,
     )}
     {...props}
   >
@@ -147,7 +147,7 @@ const DropdownMenuLabel = React.forwardRef<
     className={cn(
       "px-2 py-1.5 text-sm font-semibold text-slate-900 dark:text-slate-300",
       inset && "pl-8",
-      className
+      className,
     )}
     {...props}
   />
@@ -174,7 +174,7 @@ const DropdownMenuShortcut = ({
     <span
       className={cn(
         "ml-auto text-xs tracking-widest text-slate-500",
-        className
+        className,
       )}
       {...props}
     />
@@ -197,5 +197,5 @@ export {
   DropdownMenuSub,
   DropdownMenuSubContent,
   DropdownMenuSubTrigger,
-  DropdownMenuRadioGroup
+  DropdownMenuRadioGroup,
 };

src/components/UI/Input.tsx

@@ -26,7 +26,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
           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",
             action && "pr-8",
-            className
+            className,
           )}
           ref={ref}
           {...props}
@@ -46,7 +46,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
         )}
       </div>
     );
-  }
+  },
 );
 Input.displayName = "Input";
 

src/components/UI/Label.tsx

@@ -11,7 +11,7 @@ const Label = React.forwardRef<
     ref={ref}
     className={cn(
       "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
-      className
+      className,
     )}
     {...props}
   />

src/components/UI/Menubar.tsx

@@ -22,7 +22,7 @@ const Menubar = React.forwardRef<
     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
+      className,
     )}
     {...props}
   />
@@ -37,7 +37,7 @@ const MenubarTrigger = React.forwardRef<
     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
+      className,
     )}
     {...props}
   />
@@ -55,7 +55,7 @@ const MenubarSubTrigger = React.forwardRef<
     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
+      className,
     )}
     {...props}
   >
@@ -73,7 +73,7 @@ const MenubarSubContent = React.forwardRef<
     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
+      className,
     )}
     {...props}
   />
@@ -86,7 +86,7 @@ const MenubarContent = React.forwardRef<
 >(
   (
     { className, align = "start", alignOffset = -4, sideOffset = 8, ...props },
-    ref
+    ref,
   ) => (
     <MenubarPrimitive.Portal>
       <MenubarPrimitive.Content
@@ -96,12 +96,12 @@ const MenubarContent = React.forwardRef<
         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
+          className,
         )}
         {...props}
       />
     </MenubarPrimitive.Portal>
-  )
+  ),
 );
 MenubarContent.displayName = MenubarPrimitive.Content.displayName;
 
@@ -116,7 +116,7 @@ const MenubarItem = React.forwardRef<
     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
+      className,
     )}
     {...props}
   />
@@ -131,7 +131,7 @@ const MenubarCheckboxItem = React.forwardRef<
     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
+      className,
     )}
     checked={checked}
     {...props}
@@ -154,7 +154,7 @@ const MenubarRadioItem = React.forwardRef<
     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
+      className,
     )}
     {...props}
   >
@@ -179,7 +179,7 @@ const MenubarLabel = React.forwardRef<
     className={cn(
       "px-2 py-1.5 text-sm font-semibold text-slate-900 dark:text-slate-300",
       inset && "pl-8",
-      className
+      className,
     )}
     {...props}
   />
@@ -206,7 +206,7 @@ const MenubarShortcut = ({
     <span
       className={cn(
         "ml-auto text-xs tracking-widest text-slate-500",
-        className
+        className,
       )}
       {...props}
     />
@@ -230,5 +230,5 @@ export {
   MenubarSubTrigger,
   MenubarGroup,
   MenubarSub,
-  MenubarShortcut
+  MenubarShortcut,
 };

src/components/UI/Popover.tsx

@@ -18,7 +18,7 @@ const PopoverContent = React.forwardRef<
       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
+        className,
       )}
       {...props}
     />

src/components/UI/ScrollArea.tsx

@@ -34,7 +34,7 @@ const ScrollBar = React.forwardRef<
         "h-full w-2.5 border-l border-l-transparent p-[1px]",
       orientation === "horizontal" &&
         "h-2.5 border-t border-t-transparent p-[1px]",
-      className
+      className,
     )}
     {...props}
   >

src/components/UI/Select.tsx

@@ -18,7 +18,7 @@ const SelectTrigger = React.forwardRef<
     ref={ref}
     className={cn(
       "flex h-10 w-full items-center justify-between 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
+      className,
     )}
     {...props}
   >
@@ -37,7 +37,7 @@ const SelectContent = React.forwardRef<
       ref={ref}
       className={cn(
         "relative z-50 min-w-[8rem] overflow-hidden rounded-md border border-slate-100 bg-white text-slate-700 shadow-md animate-in fade-in-80 dark:border-slate-800 dark:bg-slate-800 dark:text-slate-400",
-        className
+        className,
       )}
       {...props}
     >
@@ -57,7 +57,7 @@ const SelectLabel = React.forwardRef<
     ref={ref}
     className={cn(
       "py-1.5 pr-2 pl-8 text-sm font-semibold text-slate-900 dark:text-slate-300",
-      className
+      className,
     )}
     {...props}
   />
@@ -72,7 +72,7 @@ const SelectItem = React.forwardRef<
     ref={ref}
     className={cn(
       "relative flex cursor-default select-none items-center rounded-sm py-1.5 pr-2 pl-8 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
+      className,
     )}
     {...props}
   >
@@ -107,5 +107,5 @@ export {
   SelectContent,
   SelectLabel,
   SelectItem,
-  SelectSeparator
+  SelectSeparator,
 };

src/components/UI/Seperator.tsx

@@ -9,7 +9,7 @@ const Separator = React.forwardRef<
 >(
   (
     { className, orientation = "horizontal", decorative = true, ...props },
-    ref
+    ref,
   ) => (
     <SeparatorPrimitive.Root
       ref={ref}
@@ -18,11 +18,11 @@ const Separator = React.forwardRef<
       className={cn(
         "bg-slate-200 dark:bg-slate-700",
         orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]",
-        className
+        className,
       )}
       {...props}
     />
-  )
+  ),
 );
 Separator.displayName = SeparatorPrimitive.Root.displayName;
 

src/components/UI/Sidebar/SidebarSection.tsx

@@ -8,7 +8,7 @@ export interface SidebarSectionProps {
 
 export const SidebarSection = ({
   label: title,
-  children
+  children,
 }: SidebarSectionProps): JSX.Element => (
   <div className="px-4 py-2">
     <H4 className="mb-2 ml-2">{title}</H4>

src/components/UI/Sidebar/sidebarButton.tsx

@@ -14,7 +14,7 @@ export const SidebarButton = ({
   active,
   icon: Icon,
   element,
-  onClick
+  onClick,
 }: SidebarButtonProps): JSX.Element => (
   <Button
     onClick={onClick}

src/components/UI/Switch.tsx

@@ -10,14 +10,14 @@ const Switch = React.forwardRef<
   <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
+      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"
+        "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>

src/components/UI/Tabs.tsx

@@ -13,7 +13,7 @@ const TabsList = React.forwardRef<
     ref={ref}
     className={cn(
       "inline-flex items-center justify-center rounded-md bg-slate-100 p-1 dark:bg-slate-800",
-      className
+      className,
     )}
     {...props}
   />
@@ -27,7 +27,7 @@ const TabsTrigger = React.forwardRef<
   <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
+      className,
     )}
     {...props}
     ref={ref}
@@ -42,7 +42,7 @@ const TabsContent = React.forwardRef<
   <TabsPrimitive.Content
     className={cn(
       "mt-2 rounded-md border border-slate-200 p-6 dark:border-slate-700",
-      className
+      className,
     )}
     {...props}
     ref={ref}

src/components/UI/Toast.tsx

@@ -15,7 +15,7 @@ const ToastViewport = React.forwardRef<
     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
+      className,
     )}
     {...props}
   />
@@ -30,13 +30,13 @@ const toastVariants = cva(
         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"
-      }
+          "group destructive bg-red-600 text-white border-red-600 dark:border-red-600",
+      },
     },
     defaultVariants: {
-      variant: "default"
-    }
-  }
+      variant: "default",
+    },
+  },
 );
 
 const Toast = React.forwardRef<
@@ -62,7 +62,7 @@ const ToastAction = React.forwardRef<
     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
+      className,
     )}
     {...props}
   />
@@ -77,7 +77,7 @@ const ToastClose = React.forwardRef<
     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
+      className,
     )}
     toast-close=""
     {...props}
@@ -124,5 +124,5 @@ export {
   ToastTitle,
   ToastDescription,
   ToastClose,
-  ToastAction
+  ToastAction,
 };

src/components/UI/Tooltip.tsx

@@ -19,7 +19,7 @@ const TooltipContent = React.forwardRef<
     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
+      className,
     )}
     {...props}
   />

src/components/UI/Typography/H4.tsx

@@ -9,7 +9,7 @@ export const H4 = ({ className, children }: H4Props): JSX.Element => (
   <h4
     className={cn(
       "scroll-m-20 text-xl font-semibold tracking-tight",
-      className
+      className,
     )}
   >
     {children}

src/components/generic/ThemeController.tsx

@@ -6,7 +6,7 @@ export interface ThemeControllerProps {
 }
 
 export const ThemeController = ({
-  children
+  children,
 }: ThemeControllerProps): JSX.Element => {
   const { darkMode, accent } = useAppStore();