From 9979bb41617eb82f22bafd781b5e8d202b4cfed3 Mon Sep 17 00:00:00 2001
From: Adam Shiervani <adam.shiervani@gmail.com>
Date: Tue, 25 Mar 2025 10:44:08 +0100
Subject: [PATCH] More linting fixes

---
 ui/package.json                               |  4 ++--
 ui/src/components/ActionBar.tsx               |  9 +++----
 ui/src/components/AuthLayout.tsx              | 11 ++++-----
 .../components/extensions/ATXPowerControl.tsx | 12 ++++++----
 .../components/extensions/DCPowerControl.tsx  | 13 +++++-----
 .../components/extensions/SerialConsole.tsx   |  7 +++---
 .../components/popovers/ExtensionPopover.tsx  | 19 ++++++++-------
 ui/src/components/popovers/MountPopover.tsx   | 17 ++++++-------
 ui/src/components/popovers/PasteModal.tsx     | 22 +++++++++--------
 .../popovers/WakeOnLan/AddDeviceForm.tsx      | 12 +++++-----
 .../popovers/WakeOnLan/DeviceList.tsx         | 24 +++++++++----------
 .../popovers/WakeOnLan/EmptyStateCard.tsx     | 13 +++++-----
 .../components/popovers/WakeOnLan/Index.tsx   |  8 ++++---
 ui/src/components/sidebar/connectionStats.tsx | 21 ++++++++--------
 ui/src/notifications.tsx                      |  3 ++-
 .../devices.$id.settings.access._index.tsx    | 23 +++++++++---------
 ui/src/utils.ts                               |  6 ++---
 17 files changed, 115 insertions(+), 109 deletions(-)

diff --git a/ui/package.json b/ui/package.json
index 128d360..f8f1c7a 100644
--- a/ui/package.json
+++ b/ui/package.json
@@ -13,8 +13,8 @@
     "build:device": "tsc && vite build --mode=device --emptyOutDir",
     "build:staging": "tsc && vite build --mode=cloud-staging",
     "build:prod": "tsc && vite build --mode=cloud-production",
-    "lint": "eslint ./src/**/*.{ts,tsx} --no-error-on-unmatched-pattern",
-    "lint:fix": "eslint ./src/**/*.{ts,tsx} --no-error-on-unmatched-pattern --fix",
+    "lint": "eslint './src/**/*.{ts,tsx}'",
+    "lint:fix": "eslint './src/**/*.{ts,tsx}' --fix",
     "preview": "vite preview"
   },
   "dependencies": {
diff --git a/ui/src/components/ActionBar.tsx b/ui/src/components/ActionBar.tsx
index 17d3fc9..1afef63 100644
--- a/ui/src/components/ActionBar.tsx
+++ b/ui/src/components/ActionBar.tsx
@@ -16,12 +16,9 @@ import Container from "@components/Container";
 import { cx } from "@/cva.config";
 import PasteModal from "@/components/popovers/PasteModal";
 import WakeOnLanModal from "@/components/popovers/WakeOnLan/Index";
-
-
-import { useDeviceUiNavigation } from "../hooks/useAppNavigation";
-
-import MountPopopover from "./popovers/MountPopover";
-import ExtensionPopover from "./popovers/ExtensionPopover";
+import MountPopopover from "@/components/popovers/MountPopover";
+import ExtensionPopover from "@/components/popovers/ExtensionPopover";
+import { useDeviceUiNavigation } from "@/hooks/useAppNavigation";
 
 export default function Actionbar({
   requestFullscreen,
diff --git a/ui/src/components/AuthLayout.tsx b/ui/src/components/AuthLayout.tsx
index 58e1549..b1e9cbc 100644
--- a/ui/src/components/AuthLayout.tsx
+++ b/ui/src/components/AuthLayout.tsx
@@ -47,8 +47,8 @@ export default function AuthLayout({
           }
         />
         <Container>
-          <div className="flex items-center justify-center w-full h-full isolate">
-            <div className="max-w-2xl -mt-16 space-y-8">
+          <div className="isolate flex h-full w-full items-center justify-center">
+            <div className="-mt-16 max-w-2xl space-y-8">
               {showCounter ? (
                 <div className="text-center">
                   <StepCounter currStepIdx={0} nSteps={2} />
@@ -62,11 +62,8 @@ export default function AuthLayout({
               </div>
 
               <Fieldset className="space-y-12">
-                <div className="max-w-sm mx-auto space-y-4">
-                  <form
-                    action={`${CLOUD_API}/oidc/google`}
-                    method="POST"
-                  >
+                <div className="mx-auto max-w-sm space-y-4">
+                  <form action={`${CLOUD_API}/oidc/google`} method="POST">
                     {/*This could be the KVM ID*/}
                     {deviceId ? (
                       <input type="hidden" name="deviceId" value={deviceId} />
diff --git a/ui/src/components/extensions/ATXPowerControl.tsx b/ui/src/components/extensions/ATXPowerControl.tsx
index 62b3bfb..0334a18 100644
--- a/ui/src/components/extensions/ATXPowerControl.tsx
+++ b/ui/src/components/extensions/ATXPowerControl.tsx
@@ -1,11 +1,13 @@
-import { Button } from "@components/Button";
 import { LuHardDrive, LuPower, LuRotateCcw } from "react-icons/lu";
+import { useEffect, useState } from "react";
+
+import { Button } from "@components/Button";
 import Card from "@components/Card";
 import { SettingsPageHeader } from "@components/SettingsPageheader";
-import { useEffect, useState } from "react";
 import notifications from "@/notifications";
+import LoadingSpinner from "@/components/LoadingSpinner";
+
 import { useJsonRpc } from "../../hooks/useJsonRpc";
-import LoadingSpinner from "../LoadingSpinner";
 
 const LONG_PRESS_DURATION = 3000; // 3 seconds for long press
 
@@ -102,11 +104,11 @@ export function ATXPowerControl() {
 
       {atxState === null ? (
         <Card className="flex h-[120px] items-center justify-center p-3">
-          <LoadingSpinner className="w-6 h-6 text-blue-500 dark:text-blue-400" />
+          <LoadingSpinner className="h-6 w-6 text-blue-500 dark:text-blue-400" />
         </Card>
       ) : (
         <Card className="h-[120px] animate-fadeIn opacity-0">
-          <div className="p-3 space-y-4">
+          <div className="space-y-4 p-3">
             {/* Control Buttons */}
             <div className="flex items-center space-x-2">
               <Button
diff --git a/ui/src/components/extensions/DCPowerControl.tsx b/ui/src/components/extensions/DCPowerControl.tsx
index e903939..3fcb7dc 100644
--- a/ui/src/components/extensions/DCPowerControl.tsx
+++ b/ui/src/components/extensions/DCPowerControl.tsx
@@ -1,12 +1,13 @@
-import { Button } from "@components/Button";
 import { LuPower } from "react-icons/lu";
+import { useCallback, useEffect, useState } from "react";
+
+import { Button } from "@components/Button";
 import Card from "@components/Card";
 import { SettingsPageHeader } from "@components/SettingsPageheader";
-import FieldLabel from "../FieldLabel";
 import { useJsonRpc } from "@/hooks/useJsonRpc";
-import { useCallback, useEffect, useState } from "react";
 import notifications from "@/notifications";
-import LoadingSpinner from "../LoadingSpinner";
+import FieldLabel from "@components/FieldLabel";
+import LoadingSpinner from "@components/LoadingSpinner";
 
 interface DCPowerState {
   isOn: boolean;
@@ -59,11 +60,11 @@ export function DCPowerControl() {
 
       {powerState === null ? (
         <Card className="flex h-[160px] justify-center p-3">
-          <LoadingSpinner className="w-6 h-6 text-blue-500 dark:text-blue-400" />
+          <LoadingSpinner className="h-6 w-6 text-blue-500 dark:text-blue-400" />
         </Card>
       ) : (
         <Card className="h-[160px] animate-fadeIn opacity-0">
-          <div className="p-3 space-y-4">
+          <div className="space-y-4 p-3">
             {/* Power Controls */}
             <div className="flex items-center space-x-2">
               <Button
diff --git a/ui/src/components/extensions/SerialConsole.tsx b/ui/src/components/extensions/SerialConsole.tsx
index 238a3aa..544d3fd 100644
--- a/ui/src/components/extensions/SerialConsole.tsx
+++ b/ui/src/components/extensions/SerialConsole.tsx
@@ -1,12 +1,13 @@
-import { Button } from "@components/Button";
 import { LuTerminal } from "react-icons/lu";
+import { useEffect, useState } from "react";
+
+import { Button } from "@components/Button";
 import Card from "@components/Card";
 import { SettingsPageHeader } from "@components/SettingsPageheader";
-import { SelectMenuBasic } from "../SelectMenuBasic";
 import { useJsonRpc } from "@/hooks/useJsonRpc";
-import { useEffect, useState } from "react";
 import notifications from "@/notifications";
 import { useUiStore } from "@/hooks/stores";
+import { SelectMenuBasic } from "@components/SelectMenuBasic";
 
 interface SerialSettings {
   baudRate: string;
diff --git a/ui/src/components/popovers/ExtensionPopover.tsx b/ui/src/components/popovers/ExtensionPopover.tsx
index e8141aa..69d0e70 100644
--- a/ui/src/components/popovers/ExtensionPopover.tsx
+++ b/ui/src/components/popovers/ExtensionPopover.tsx
@@ -1,19 +1,20 @@
 import { useEffect, useState } from "react";
+import { LuPower, LuTerminal, LuPlugZap } from "react-icons/lu";
+
 import { useJsonRpc } from "@/hooks/useJsonRpc";
 import Card, { GridCard } from "@components/Card";
 import { SettingsPageHeader } from "@components/SettingsPageheader";
-import { Button } from "../Button";
-import { LuPower, LuTerminal, LuPlugZap } from "react-icons/lu";
 import { ATXPowerControl } from "@components/extensions/ATXPowerControl";
 import { DCPowerControl } from "@components/extensions/DCPowerControl";
 import { SerialConsole } from "@components/extensions/SerialConsole";
-import notifications from "../../notifications";
+import { Button } from "@components/Button";
+import notifications from "@/notifications";
 
 interface Extension {
   id: string;
   name: string;
   description: string;
-  icon: any;
+  icon: React.ElementType;
 }
 
 const AVAILABLE_EXTENSIONS: Extension[] = [
@@ -58,7 +59,9 @@ export default function ExtensionPopover() {
   const handleSetActiveExtension = (extension: Extension | null) => {
     send("setActiveExtension", { extensionId: extension?.id || "" }, resp => {
       if ("error" in resp) {
-        notifications.error(`Failed to set active extension: ${resp.error.data || "Unknown error"}`);
+        notifications.error(
+          `Failed to set active extension: ${resp.error.data || "Unknown error"}`,
+        );
         return;
       }
       setActiveExtension(extension);
@@ -80,7 +83,7 @@ export default function ExtensionPopover() {
 
   return (
     <GridCard>
-      <div className="p-4 py-3 space-y-4">
+      <div className="space-y-4 p-4 py-3">
         <div className="grid h-full grid-rows-headerBody">
           <div className="space-y-4">
             {activeExtension ? (
@@ -89,7 +92,7 @@ export default function ExtensionPopover() {
                 {renderActiveExtension()}
 
                 <div
-                  className="flex items-center justify-end space-x-2 opacity-0 animate-fadeIn"
+                  className="flex animate-fadeIn items-center justify-end space-x-2 opacity-0"
                   style={{
                     animationDuration: "0.7s",
                     animationDelay: "0.2s",
@@ -110,7 +113,7 @@ export default function ExtensionPopover() {
                   title="Extensions"
                   description="Load and manage your extensions"
                 />
-                <Card className="opacity-0 animate-fadeIn">
+                <Card className="animate-fadeIn opacity-0">
                   <div className="w-full divide-y divide-slate-700/30 dark:divide-slate-600/30">
                     {AVAILABLE_EXTENSIONS.map(extension => (
                       <div
diff --git a/ui/src/components/popovers/MountPopover.tsx b/ui/src/components/popovers/MountPopover.tsx
index 41dbbd6..065f547 100644
--- a/ui/src/components/popovers/MountPopover.tsx
+++ b/ui/src/components/popovers/MountPopover.tsx
@@ -1,11 +1,6 @@
-import { Button } from "@components/Button";
 import { ExclamationTriangleIcon } from "@heroicons/react/24/outline";
-import Card, { GridCard } from "@components/Card";
 import { PlusCircleIcon } from "@heroicons/react/20/solid";
 import { useMemo, forwardRef, useEffect, useCallback } from "react";
-import { formatters } from "@/utils";
-import { RemoteVirtualMediaState, useMountMediaStore, useRTCStore } from "@/hooks/stores";
-import { SettingsPageHeader } from "@components/SettingsPageheader";
 import {
   LuArrowUpFromLine,
   LuCheckCheck,
@@ -13,11 +8,17 @@ import {
   LuPlus,
   LuRadioReceiver,
 } from "react-icons/lu";
-import { useJsonRpc } from "@/hooks/useJsonRpc";
-import notifications from "../../notifications";
 import { useClose } from "@headlessui/react";
 import { useLocation } from "react-router-dom";
+
+import { Button } from "@components/Button";
+import Card, { GridCard } from "@components/Card";
+import { formatters } from "@/utils";
+import { RemoteVirtualMediaState, useMountMediaStore, useRTCStore } from "@/hooks/stores";
+import { SettingsPageHeader } from "@components/SettingsPageheader";
+import { useJsonRpc } from "@/hooks/useJsonRpc";
 import { useDeviceUiNavigation } from "@/hooks/useAppNavigation";
+import notifications from "@/notifications";
 
 const MountPopopover = forwardRef<HTMLDivElement, object>((_props, ref) => {
   const diskDataChannelStats = useRTCStore(state => state.diskDataChannelStats);
@@ -194,7 +195,7 @@ const MountPopopover = forwardRef<HTMLDivElement, object>((_props, ref) => {
     <GridCard>
       <div className="space-y-4 p-4 py-3">
         <div ref={ref} className="grid h-full grid-rows-headerBody">
-          <div className="h-full space-y-4 ">
+          <div className="h-full space-y-4">
             <div className="space-y-4">
               <SettingsPageHeader
                 title="Virtual Media"
diff --git a/ui/src/components/popovers/PasteModal.tsx b/ui/src/components/popovers/PasteModal.tsx
index ce93934..643f55b 100644
--- a/ui/src/components/popovers/PasteModal.tsx
+++ b/ui/src/components/popovers/PasteModal.tsx
@@ -1,15 +1,16 @@
+import { useCallback, useEffect, useRef, useState } from "react";
+import { LuCornerDownLeft } from "react-icons/lu";
+import { ExclamationCircleIcon } from "@heroicons/react/16/solid";
+import { useClose } from "@headlessui/react";
+
 import { Button } from "@components/Button";
 import { GridCard } from "@components/Card";
 import { TextAreaWithLabel } from "@components/TextArea";
 import { SettingsPageHeader } from "@components/SettingsPageheader";
 import { useJsonRpc } from "@/hooks/useJsonRpc";
 import { useHidStore, useRTCStore, useUiStore } from "@/hooks/stores";
-import notifications from "../../notifications";
-import { useCallback, useEffect, useRef, useState } from "react";
-import { LuCornerDownLeft } from "react-icons/lu";
-import { ExclamationCircleIcon } from "@heroicons/react/16/solid";
-import { useClose } from "@headlessui/react";
 import { chars, keys, modifiers } from "@/keyboardMappings";
+import notifications from "@/notifications";
 
 const hidKeyboardPayload = (keys: number[], modifier: number) => {
   return { keys, modifier };
@@ -59,6 +60,7 @@ export default function PasteModal() {
         });
       }
     } catch (error) {
+      console.error(error);
       notifications.error("Failed to paste text");
     }
   }, [rpcDataChannel?.readyState, send, setDisableVideoFocusTrap, setPasteMode]);
@@ -71,7 +73,7 @@ export default function PasteModal() {
 
   return (
     <GridCard>
-      <div className="p-4 py-3 space-y-4">
+      <div className="space-y-4 p-4 py-3">
         <div className="grid h-full grid-rows-headerBody">
           <div className="h-full space-y-4">
             <div className="space-y-4">
@@ -81,7 +83,7 @@ export default function PasteModal() {
               />
 
               <div
-                className="space-y-2 opacity-0 animate-fadeIn"
+                className="animate-fadeIn space-y-2 opacity-0"
                 style={{
                   animationDuration: "0.7s",
                   animationDelay: "0.1s",
@@ -120,8 +122,8 @@ export default function PasteModal() {
                     />
 
                     {invalidChars.length > 0 && (
-                      <div className="flex items-center mt-2 gap-x-2">
-                        <ExclamationCircleIcon className="w-4 h-4 text-red-500 dark:text-red-400" />
+                      <div className="mt-2 flex items-center gap-x-2">
+                        <ExclamationCircleIcon className="h-4 w-4 text-red-500 dark:text-red-400" />
                         <span className="text-xs text-red-500 dark:text-red-400">
                           The following characters won&apos;t be pasted:{" "}
                           {invalidChars.join(", ")}
@@ -135,7 +137,7 @@ export default function PasteModal() {
           </div>
         </div>
         <div
-          className="flex items-center justify-end opacity-0 animate-fadeIn gap-x-2"
+          className="flex animate-fadeIn items-center justify-end gap-x-2 opacity-0"
           style={{
             animationDuration: "0.7s",
             animationDelay: "0.2s",
diff --git a/ui/src/components/popovers/WakeOnLan/AddDeviceForm.tsx b/ui/src/components/popovers/WakeOnLan/AddDeviceForm.tsx
index b94c350..2b4198c 100644
--- a/ui/src/components/popovers/WakeOnLan/AddDeviceForm.tsx
+++ b/ui/src/components/popovers/WakeOnLan/AddDeviceForm.tsx
@@ -1,8 +1,8 @@
-import { InputFieldWithLabel } from "@components/InputField";
 import { useState, useRef } from "react";
-import { LuPlus } from "react-icons/lu";
-import { Button } from "../../Button";
-import { LuArrowLeft } from "react-icons/lu";
+import { LuPlus, LuArrowLeft } from "react-icons/lu";
+
+import { InputFieldWithLabel } from "@/components/InputField";
+import { Button } from "@/components/Button";
 
 interface AddDeviceFormProps {
   onAddDevice: (name: string, macAddress: string) => void;
@@ -26,7 +26,7 @@ export default function AddDeviceForm({
   return (
     <div className="space-y-4">
       <div
-        className="space-y-4 opacity-0 animate-fadeIn"
+        className="animate-fadeIn space-y-4 opacity-0"
         style={{
           animationDuration: "0.5s",
           animationFillMode: "forwards",
@@ -73,7 +73,7 @@ export default function AddDeviceForm({
         />
       </div>
       <div
-        className="flex items-center justify-end space-x-2 opacity-0 animate-fadeIn"
+        className="flex animate-fadeIn items-center justify-end space-x-2 opacity-0"
         style={{
           animationDuration: "0.7s",
           animationDelay: "0.2s",
diff --git a/ui/src/components/popovers/WakeOnLan/DeviceList.tsx b/ui/src/components/popovers/WakeOnLan/DeviceList.tsx
index 2f5537a..b46e84a 100644
--- a/ui/src/components/popovers/WakeOnLan/DeviceList.tsx
+++ b/ui/src/components/popovers/WakeOnLan/DeviceList.tsx
@@ -1,8 +1,9 @@
-import { Button } from "@components/Button";
-import Card from "@components/Card";
-import { FieldError } from "@components/InputField";
 import { LuPlus, LuSend, LuTrash2 } from "react-icons/lu";
 
+import { Button } from "@/components/Button";
+import Card from "@/components/Card";
+import { FieldError } from "@/components/InputField";
+
 export interface StoredDevice {
   name: string;
   macAddress: string;
@@ -27,12 +28,14 @@ export default function DeviceList({
 }: DeviceListProps) {
   return (
     <div className="space-y-4">
-      <Card className="opacity-0 animate-fadeIn">
+      <Card className="animate-fadeIn opacity-0">
         <div className="w-full divide-y divide-slate-700/30 dark:divide-slate-600/30">
           {storedDevices.map((device, index) => (
-            <div key={index} className="flex items-center justify-between p-3 gap-x-2">
+            <div key={index} className="flex items-center justify-between gap-x-2 p-3">
               <div className="space-y-0.5">
-                <p className="text-sm font-semibold leading-none text-slate-900 dark:text-slate-100">{device?.name}</p>
+                <p className="text-sm font-semibold leading-none text-slate-900 dark:text-slate-100">
+                  {device?.name}
+                </p>
                 <p className="text-sm text-slate-600 dark:text-slate-400">
                   {device.macAddress?.toLowerCase()}
                 </p>
@@ -60,18 +63,13 @@ export default function DeviceList({
         </div>
       </Card>
       <div
-        className="flex items-center justify-end space-x-2 opacity-0 animate-fadeIn"
+        className="flex animate-fadeIn items-center justify-end space-x-2 opacity-0"
         style={{
           animationDuration: "0.7s",
           animationDelay: "0.2s",
         }}
       >
-        <Button
-          size="SM"
-          theme="blank"
-          text="Close"
-          onClick={onCancelWakeOnLanModal}
-        />
+        <Button size="SM" theme="blank" text="Close" onClick={onCancelWakeOnLanModal} />
         <Button
           size="SM"
           theme="primary"
diff --git a/ui/src/components/popovers/WakeOnLan/EmptyStateCard.tsx b/ui/src/components/popovers/WakeOnLan/EmptyStateCard.tsx
index 9c7967d..f6f97db 100644
--- a/ui/src/components/popovers/WakeOnLan/EmptyStateCard.tsx
+++ b/ui/src/components/popovers/WakeOnLan/EmptyStateCard.tsx
@@ -1,7 +1,8 @@
-import Card from "@components/Card";
 import { PlusCircleIcon } from "@heroicons/react/16/solid";
 import { LuPlus } from "react-icons/lu";
-import { Button } from "../../Button";
+
+import Card from "@/components/Card";
+import { Button } from "@/components/Button";
 
 export default function EmptyStateCard({
   onCancelWakeOnLanModal,
@@ -11,15 +12,15 @@ export default function EmptyStateCard({
   setShowAddForm: (show: boolean) => void;
 }) {
   return (
-    <div className="space-y-4 select-none">
-      <Card className="opacity-0 animate-fadeIn">
+    <div className="select-none space-y-4">
+      <Card className="animate-fadeIn opacity-0">
         <div className="flex items-center justify-center py-8 text-center">
           <div className="space-y-3">
             <div className="space-y-1">
               <div className="inline-block">
                 <Card>
                   <div className="p-1">
-                    <PlusCircleIcon className="w-4 h-4 text-blue-700 shrink-0 dark:text-white" />
+                    <PlusCircleIcon className="h-4 w-4 shrink-0 text-blue-700 dark:text-white" />
                   </div>
                 </Card>
               </div>
@@ -34,7 +35,7 @@ export default function EmptyStateCard({
         </div>
       </Card>
       <div
-        className="flex items-center justify-end space-x-2 opacity-0 animate-fadeIn"
+        className="flex animate-fadeIn items-center justify-end space-x-2 opacity-0"
         style={{
           animationDuration: "0.7s",
           animationDelay: "0.2s",
diff --git a/ui/src/components/popovers/WakeOnLan/Index.tsx b/ui/src/components/popovers/WakeOnLan/Index.tsx
index 8b13a0f..3801461 100644
--- a/ui/src/components/popovers/WakeOnLan/Index.tsx
+++ b/ui/src/components/popovers/WakeOnLan/Index.tsx
@@ -1,10 +1,12 @@
+import { useCallback, useEffect, useState } from "react";
+import { useClose } from "@headlessui/react";
+
 import { GridCard } from "@components/Card";
 import { SettingsPageHeader } from "@components/SettingsPageheader";
 import { useJsonRpc } from "@/hooks/useJsonRpc";
 import { useRTCStore, useUiStore } from "@/hooks/stores";
 import notifications from "@/notifications";
-import { useCallback, useEffect, useState } from "react";
-import { useClose } from "@headlessui/react";
+
 import EmptyStateCard from "./EmptyStateCard";
 import DeviceList, { StoredDevice } from "./DeviceList";
 import AddDeviceForm from "./AddDeviceForm";
@@ -99,7 +101,7 @@ export default function WakeOnLanModal() {
 
   return (
     <GridCard>
-      <div className="p-4 py-3 space-y-4">
+      <div className="space-y-4 p-4 py-3">
         <div className="grid h-full grid-rows-headerBody">
           <div className="space-y-4">
             <SettingsPageHeader
diff --git a/ui/src/components/sidebar/connectionStats.tsx b/ui/src/components/sidebar/connectionStats.tsx
index 82e8ab8..8e7234c 100644
--- a/ui/src/components/sidebar/connectionStats.tsx
+++ b/ui/src/components/sidebar/connectionStats.tsx
@@ -1,9 +1,10 @@
-import SidebarHeader from "@components/SidebarHeader";
-import { GridCard } from "@components/Card";
-import { useRTCStore, useUiStore } from "@/hooks/stores";
-import StatChart from "@components/StatChart";
 import { useInterval } from "usehooks-ts";
 
+import SidebarHeader from "@/components/SidebarHeader";
+import { GridCard } from "@/components/Card";
+import { useRTCStore, useUiStore } from "@/hooks/stores";
+import StatChart from "@/components/StatChart";
+
 function createChartArray<T, K extends keyof T>(
   stream: Map<number, T>,
   metric: K,
@@ -120,7 +121,7 @@ export default function ConnectionStatsSidebar() {
                 <GridCard>
                   <div className="flex h-[127px] w-full items-center justify-center text-sm text-slate-500">
                     {inboundRtpStats.size === 0 ? (
-                      <div className="flex flex-col items-center space-y-1 ">
+                      <div className="flex flex-col items-center space-y-1">
                         <p className="text-slate-700">Waiting for data...</p>
                       </div>
                     ) : isMetricSupported(inboundRtpStats, "packetsLost") ? (
@@ -130,7 +131,7 @@ export default function ConnectionStatsSidebar() {
                         unit=" packets"
                       />
                     ) : (
-                      <div className="flex flex-col items-center space-y-1 ">
+                      <div className="flex flex-col items-center space-y-1">
                         <p className="text-black">Metric not supported</p>
                       </div>
                     )}
@@ -149,7 +150,7 @@ export default function ConnectionStatsSidebar() {
                 <GridCard>
                   <div className="flex h-[127px] w-full items-center justify-center text-sm text-slate-500">
                     {inboundRtpStats.size === 0 ? (
-                      <div className="flex flex-col items-center space-y-1 ">
+                      <div className="flex flex-col items-center space-y-1">
                         <p className="text-slate-700">Waiting for data...</p>
                       </div>
                     ) : isMetricSupported(candidatePairStats, "currentRoundTripTime") ? (
@@ -167,7 +168,7 @@ export default function ConnectionStatsSidebar() {
                         unit=" ms"
                       />
                     ) : (
-                      <div className="flex flex-col items-center space-y-1 ">
+                      <div className="flex flex-col items-center space-y-1">
                         <p className="text-black">Metric not supported</p>
                       </div>
                     )}
@@ -186,7 +187,7 @@ export default function ConnectionStatsSidebar() {
                 <GridCard>
                   <div className="flex h-[127px] w-full items-center justify-center text-sm text-slate-500">
                     {inboundRtpStats.size === 0 ? (
-                      <div className="flex flex-col items-center space-y-1 ">
+                      <div className="flex flex-col items-center space-y-1">
                         <p className="text-slate-700">Waiting for data...</p>
                       </div>
                     ) : (
@@ -216,7 +217,7 @@ export default function ConnectionStatsSidebar() {
                 <GridCard>
                   <div className="flex h-[127px] w-full items-center justify-center text-sm text-slate-500">
                     {inboundRtpStats.size === 0 ? (
-                      <div className="flex flex-col items-center space-y-1 ">
+                      <div className="flex flex-col items-center space-y-1">
                         <p className="text-slate-700">Waiting for data...</p>
                       </div>
                     ) : (
diff --git a/ui/src/notifications.tsx b/ui/src/notifications.tsx
index 9505f2a..5677f42 100644
--- a/ui/src/notifications.tsx
+++ b/ui/src/notifications.tsx
@@ -1,8 +1,9 @@
 import toast, { Toast, Toaster, useToasterStore } from "react-hot-toast";
 import React, { useEffect } from "react";
+import { CheckCircleIcon, XCircleIcon } from "@heroicons/react/20/solid";
+
 import Card from "@/components/Card";
 
-import { CheckCircleIcon, XCircleIcon } from "@heroicons/react/20/solid";
 
 interface NotificationOptions {
   duration?: number;
diff --git a/ui/src/routes/devices.$id.settings.access._index.tsx b/ui/src/routes/devices.$id.settings.access._index.tsx
index add14c6..0ed5862 100644
--- a/ui/src/routes/devices.$id.settings.access._index.tsx
+++ b/ui/src/routes/devices.$id.settings.access._index.tsx
@@ -2,19 +2,18 @@ import { useLoaderData, useNavigate } from "react-router-dom";
 import { ShieldCheckIcon } from "@heroicons/react/24/outline";
 import { useCallback, useEffect, useState } from "react";
 
+import api from "@/api";
 import { SettingsPageHeader } from "@components/SettingsPageheader";
-
-import { useDeviceUiNavigation } from "../hooks/useAppNavigation";
-import { GridCard } from "../components/Card";
-import notifications from "../notifications";
-import api from "../api";
-import { DEVICE_API } from "../ui.config";
-import { Button, LinkButton } from "../components/Button";
-import { useJsonRpc } from "../hooks/useJsonRpc";
-import { InputFieldWithLabel } from "../components/InputField";
-import { SelectMenuBasic } from "../components/SelectMenuBasic";
-import { SettingsSectionHeader } from "../components/SettingsSectionHeader";
-import { isOnDevice } from "../main";
+import { GridCard } from "@/components/Card";
+import { Button, LinkButton } from "@/components/Button";
+import { InputFieldWithLabel } from "@/components/InputField";
+import { SelectMenuBasic } from "@/components/SelectMenuBasic";
+import { SettingsSectionHeader } from "@/components/SettingsSectionHeader";
+import { useDeviceUiNavigation } from "@/hooks/useAppNavigation";
+import notifications from "@/notifications";
+import { DEVICE_API } from "@/ui.config";
+import { useJsonRpc } from "@/hooks/useJsonRpc";
+import { isOnDevice } from "@/main";
 
 import { LocalDevice } from "./devices.$id";
 import { SettingsItem } from "./devices.$id.settings";
diff --git a/ui/src/utils.ts b/ui/src/utils.ts
index efd00fd..99c1a50 100644
--- a/ui/src/utils.ts
+++ b/ui/src/utils.ts
@@ -51,8 +51,8 @@ export const formatters = {
     ];
 
     let duration = (date.valueOf() - new Date().valueOf()) / 1000;
-    for (let i = 0; i < DIVISIONS.length; i++) {
-      const division = DIVISIONS[i];
+
+    for (const division of DIVISIONS) {
       if (Math.abs(duration) < division.amount) {
         return relativeTimeFormat.format(Math.round(duration), division.name);
       }
@@ -61,7 +61,7 @@ export const formatters = {
   },
 
   price: (price: number | bigint | string, options?: Intl.NumberFormatOptions) => {
-    let opts: Intl.NumberFormatOptions = {
+    const opts: Intl.NumberFormatOptions = {
       style: "currency",
       currency: "USD",
       ...(options || {}),